Javascript not finding Button with ID

Question

In my HTML, I have a simple button defined, like so:

<button id="toggleButton">Stop</button>

I am trying to grab it with the following code:

buttonElement = document.getElementById("toggleButton");

with the goal of assigning an event to it, like so:

buttonElement.onclick = stopTextColor();

The problem is that the getElementById is returning null, even though I can see it in the DOM. What am I doing wrong here?

For clarity, I posted the full code at http://cdpn.io/sqEuH

possible duplicate of [Why does jQuery or a DOM method such as \`getElementById\` not find the element?](http://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) — Felix Kling, Dec 07 '13 at 00:17

Samuel Bolduc · Answer 1 · 2013-12-07T00:24:12.703

Try putting your script just before closing your <body> tag. The DOM is probably not fully loaded when your script is run.

Also, I think you have an error in your Javascript. It should be

buttonElement.onclick = stopTextColor;

instead of

buttonElement.onclick = stopTextColor();

Altough it shouldn't throw any error, it's good practice.

If you want to keep your Javascript before <body>, you can use a listener to wait for the DOM to be loaded and then execute your script, like this :

window.addEventListener("DOMContentLoaded", function() {
  buttonElement = document.getElementById("toggleButton");
  buttonElement.onclick = stopTextColor;
}, false);

[edit]

The snippet above doesn't work in IE < 9. If you need to support it, use document.load instead, it should give the same result, like so :

document.onload = function() {
  buttonElement = document.getElementById("toggleButton");
  buttonElement.onclick = stopTextColor;
}

The differece between both, besides browser compatibility, is that window.addEventListener("DOMContentLoaded", function() {...} will fire when the DOM is loaded, but window.load will fire when the DOM AND all other resources (images, stylesheets, etc.) are loaded (slower, and not necessary in your case).

score 0 · Answer 2 · answered Dec 07 '13 at 00:16

The problem, probably, is that you're including the JS in the head. What's happening there is the JS is running before the page gets loaded, so the button doesn't show up. Move it to right before the </body> tag, and this problem will be solved, or wrap it with a window.onload() event.

score 0 · Answer 3 · answered Dec 07 '13 at 00:16

The code you post will work unless the javascript cannot access the given DOM element.

The main possibilities:

The javascript runs before the DOM is parsed (IE if you run it in the head of the document without any code to instruct it to wait till the DOM is ready)

You can usually get around this by placing your script at the bottom of the body rather than in the head or midway through the body. The essential thing to understand here though is that JS can't access an element till the browser has parsed the DOM. The browser parses HTML top-down, and JS scripts run top down, so if you run the JS before the element is parsed, it won't be available to the javascript function yet.
The javascript runs in a context where it can't access the element (inside an iFrame for instance). In this case it would be a question of whether the element is really under the "document" object that you're referring to. If the element is inside an iFrame it will be underneath the iFrame's document object.

Javascript not finding Button with ID

3 Answers3