getElementById returns null?

Question

document.getElementById('id of div that definately exists') returns null.

I originally loaded the javascript last in order to make sure I wouldn't need to worry about the onload event. I also tried using the onload event. It's very spooky. Any ideas or help would be greatly appreciated.

duplicate of [Why does jQuery or a DOM method such as getElementById not find the element?](http://stackoverflow.com/q/14028959/1048572) — Bergi, Jun 16 '15 at 01:49
I had a similar situation where my content was dynamically generated and the script querying id was getting called before the script which created content with that id.. I fixed that order and it worked for me — Sudip Bhandari, Mar 01 '17 at 06:45
Make sure you write just the name of id, without the `#` in front the id. — Usce, Oct 25 '18 at 19:51
For anyone like me who had this problem, after much experimenting, I found that using `getElementById()` returned null when using `window.onload=myFunction()`, but NOT when I used `` — Astrolamb, Apr 19 '19 at 06:54
This usually happens to me when I accidentally load my javascript at the top of the document rather than after the html has loaded at the bottom. — James Hubert, Nov 24 '20 at 18:50

score 95 · Answer 1 · edited Feb 28 '23 at 07:17

95

Also be careful how you execute the js on the page. For example if you do something like this:

(function(window, document, undefined) {
  
  var foo = document.getElementById("foo");
  
  console.log(foo);

})(window, document, undefined);

This will return null because you'd be calling the document before it was loaded.

Use window.onload to wait for the dom nodes to load:

(function(window, document, undefined) {

  // code that should be taken care of right away

  window.onload = init;

  function init(){
    // the code to be called when the dom has loaded
    // #document has its nodes
  }

})(window, document, undefined);

edited Feb 28 '23 at 07:17

Jtcruthers

854
1
6
23

answered Feb 19 '13 at 05:01

Cameron

2,427
1
22
27

Thanks +1 for reminding this can also be a possibility which I may have ignored. – Arnab Nandy Jun 02 '20 at 07:04
In my case, I didn't add defer keyword in my script tag – Ali Bin Naseer Jul 24 '23 at 12:25

score 66 · Accepted Answer · answered Jan 05 '12 at 08:34

66

It can be caused by:

Invalid HTML syntax (some tag is not closed or similar error)
Duplicate IDs - there are two HTML DOM elements with the same ID
Maybe element you are trying to get by ID is created dynamically (loaded by ajax or created by script)?

Please, post your code.

answered Jan 05 '12 at 08:34

PanJanek

6,593
2
34
41

28

#2 actually wouldn't yield `null` but just the first of the two elements with that id. – Bergi Jun 16 '15 at 01:48
2

#1 may be as subtle as a single tag for an element that requires open and closing tag. e.g.: `` vs ``. – ebyrob May 01 '18 at 14:09
For me there was a script error I had cleared from the console while I was testing. Until the error was fixed I could not get the id – rearThing Oct 12 '20 at 17:27

score 13 · Answer 3 · edited May 23 '17 at 12:02

There could be many reason why document.getElementById doesn't work

You have an invalid ID

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods ("."). (resource: What are valid values for the id attribute in HTML?)
you used some id that you already used as <meta> name in your header (e.g. copyright, author... ) it looks weird but happened to me: if your 're using IE take a look at (resource: http://www.phpied.com/getelementbyid-description-in-ie/)
you're targeting an element inside a frame or iframe. In this case if the iframe loads a page within the same domain of the parent you should target the contentdocument before looking for the element (resource: Calling a specific id inside a frame)
you're simply looking to an element when the node is not effectively loaded in the DOM, or maybe it's a simple misspelling

I doubt you used same ID twice or more: in that case document.getElementById should return at least the first element

getElementById returns null?

3 Answers3

Linked

Related