ansaurus

Question

Why is document.getElementById() returning a null value when I know the ID exists?

Answer 1

+1 A:

The element does not exist yet when that script is being evaluated. Put it in the body's onload handler or something instead, so it executes once the DOM is in place.

An example of how to do this without touching any markup:

function callWhenLoaded(func) {
  if (window.addEventListener) {
    window.addEventListener("load", func, false);
  } else if (window.attachEvent) {
    window.attachEvent("onload", func);
  }
}

callWhenLoaded(function() { makeCurrent("undergraduate"); });

Chuck 2010-09-29 15:27:18

Yep, stupid mistake. Although my hands were a bit tied with it because I can't add per-page script tags anywhere but the head in this particular CMS, if I add them before the closing body tag then they are site-wide.

Jason Rhodes 2010-09-29 18:16:53

I changed tactics and tried to compare the href attribute of the nav links to window.location.href and add a "current" class if they match. It worked... on Firefox and Chrome, but IE7 is freaking out!

Jason Rhodes 2010-09-29 18:29:01

@Jason Rhodes: I added an example of how to do this without having to touch the body tag.

Chuck 2010-09-29 19:15:12

Thanks, @Chuck!

Jason Rhodes 2010-10-04 15:07:05

Answer 2

+3 A:

If you execute the javascript before the DOM tree has finished loading, it will return null. So an idea would be to call the function all the way at the end before you close the body tag.

This is why most JavaScript libraries have support for a dom-ready event, modern browsers have this as well (domcontentloaded) however for wide browser support it's a little trickier to do it for yourself (well, not that difficult, 3 or 4 different ways I think.)

CharlesLeaf 2010-09-29 15:27:32

Answer 3

+2 A:

The DOM is not fully loaded if you run makeCurrent in your head. You should put that script after your <li> tags.

Your code can be optimized: you can set a class attribute directly with current.className = 'current';.

Lekensteyn 2010-09-29 15:28:09

Answer 4

+1 A:

The reason is that your script is being run before the page load is complete, and therefore before the DOM is populated.

You need to make sure you only call the function after page load is complete. Do this by triggering it using document.onload() or an onload event on the body tag.

Spudley 2010-09-29 15:28:56

Answer 5

+1 A:

After all the technical answers have been spewed out already, I'm going to skip all those which it very well could be and go for some of the more obvious ones I've run into which have caused me to facepalm once I've realised:

Typo in the identity
The identity isn't what you think it is because it's being generated or partially generated by the web framework you're using i.e. in ASP.NET you could set the client id to "MyControl" only to find that by the time it is rendered in the client it's "Page_1$Control_0$MyControl$1"
You've prepended it with a # in one or more of the incorrect places, for instance, although you're not using jQuery in your example if the object id is MyControl, in jQuery and CSS you reference it using #MyControl, but in the actual id of the object, you didn't use #. In document.getElementById() you don't use a # like you would in jQuery and CSS, but you may have used it inadvertently.
You've set the name element in the control instead of the id.

As other people have mentioned though, it could be down to not waiting for the element to be available at the time you're referencing it.

BenAlabaster 2010-09-29 15:34:08

ansaurus

tags:

views:

answers:

Why is document.getElementById() returning a null value when I know the ID exists?

related questions