Why is this code not working with separate javascript?

Question

I want to turn a span of text red when I click on a button. Why does the first set of code, with separate Javascript and HTML, not work... but the second set of code does?

FIRST SET (not working)

JAVASCRIPT:
    function focus()
    {
        getElementById('redder').style.color = '#ff0000';
    }

HTML:
    <button id="button1" onClick="javascript:focus()">cool</button>
    <span id="redder"> RED </span>

. . .

SECOND SET (working)

HTML:
    <button id="button1" onClick="getElementById('redder').style.color = '#ff0000';">cool</button>
    <span id="redder"> RED </span>

focus() is a native DOM function, you need to use some other name for your function. — Teemu
– Teemu, Commented Feb 17, 2013 at 9:11

mplungjan · Accepted Answer · 2013-02-17 09:20:47Z

3

change the name of click event handler from focus to something else;
you need use document.getElementById()

<script>
     function changeColor()
        {
            document.getElementById('redder').style.color = '#ff0000';
        }
    </script>
    <body>
        <button id="button1" onClick="changeColor();">cool</button>
        <span id="redder"> RED </span>
    </body>

edited Feb 17, 2013 at 9:20

mplungjan

180k29 gold badges183 silver badges246 bronze badges

answered Feb 17, 2013 at 9:18

spiritwalker

2,26715 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Justus Romijn · Accepted Answer · 2013-02-17 09:20:00Z

1

When using non-inline JavaScript, you need to add the document scope:

document.getElementById('redder').style.color('#ff0000');

I think JavaScript does not need that scope when defined inline, but I can't find documentation on that quickly.

edited Feb 17, 2013 at 9:20

answered Feb 17, 2013 at 9:14

Justus Romijn

16.1k5 gold badges54 silver badges64 bronze badges

2 Comments

mplungjan Over a year ago

It is always safe to use document. and it will break in some browsers if not present, so just always use it.

Teemu Over a year ago

Certainly JS does need the scope, there's no window.getElementById() method.

Collectives™ on Stack Overflow

Why is this code not working with separate javascript?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related