By Softnux


2011-03-20 19:49:29 8 Comments

I'm trying to get the element with getElementById(), but it returns null even though the element exists. What am I doing wrong?

<html>
<head> 
    <title>blah</title>
    <script type="text/javascript">
        alert(document.getElementById("abc"));
    </script>
</head> 
<body>
    <div id="abc">

    </div>
</body>

5 comments

@Premraj 2011-03-20 19:56:13

If you don't want to attach to the load event then simply put your script at the bottom of the body, so it will execute at the end-

<html>
<head> 
    <title>blah</title>    
</head> 
<body>
    <div id="abc">
    </div>
    <script type="text/javascript">
        alert(document.getElementById("abc"));
    </script>
</body>
</html>

@mVChr 2011-03-20 19:52:46

Your script runs before the DOM has been loaded. To fix this you can place your code in the window.onload function like so:

window.onload = function() {
    alert(document.getElementById("abc"));
};

An alternative is to place your script right before the closing </body> tag.

@Šime Vidas 2011-03-20 20:02:14

"Right before /BODY" may confuse beginners. The requirement is to place the SCRIPT after the HTML element that the script needs to reference. The distance to /BODY is not relevant.

@LVX-001 2019-11-17 20:54:58

another thing to note. If you have a window.onload that follows another window onload from top-to-bottom on the document, the second window onload will override the content of the first window.onload. For example, if you tried setting a <div>s background color inside the first window.onload using a JS handle like so: document.getElementById('div01').style.background = 'blue'; and had the same handle inside the second window.onload but set to 'black', your div's background color would be black not blue. Order in the DOM matters.

@jpsimons 2011-03-20 19:52:45

But it doesn't exist, not at that point in the HTML. HTML documents are parsed top-to-bottom, just like programs run. The best solution is just to put your script tag at the bottom of the page. You could also attach your JavaScript to the onload event.

@Hogan 2011-03-20 19:51:11

This is because the script runs before the page has rendered.

For proof add this attribute to the body tag:

<body onload="alert(document.getElementById('abc'));" >

@Daniel A. White 2011-03-20 19:50:47

You have to put this in a document load event. The DOM hasn't gotten to abc by the time the script is executed.

@Felix Kling 2011-03-20 19:51:42

Putting the script at the bottom is probably easier for starters.

@Softnux 2011-03-20 19:56:01

Ah, Thank you! Always thought the script was run after the html was loaded.

@pimvdb 2011-03-20 20:06:08

Please note that you have to wait like 10 minutes before being able to accept.

@BugsForBreakfast 2019-08-23 14:53:14

im starter in javascript and I think this answer needs an example of that document load hehe

@BugsForBreakfast 2019-08-23 15:31:20

Also, it is helpful to add that another reason for this, is to verify that the path to the component id is good, not only the form id, also the parent of the form if it has one (for example an accordeon), and then the component, verify always this.

Related Questions

Sponsored Content

24 Answered Questions

[SOLVED] How do I completely uninstall Node.js, and reinstall from beginning (Mac OS X)

  • 2012-06-24 13:40:56
  • Dominic Tancredi
  • 1507107 View
  • 1222 Score
  • 24 Answer
  • Tags:   javascript node.js npm

22 Answered Questions

[SOLVED] How can I check if an element exists in the visible DOM?

17 Answered Questions

[SOLVED] Why is setTimeout(fn, 0) sometimes useful?

19 Answered Questions

[SOLVED] Is it possible to apply CSS to half of a character?

  • 2014-05-09 16:16:57
  • Mathew MacLean
  • 237617 View
  • 2746 Score
  • 19 Answer
  • Tags:   javascript html css

3 Answered Questions

[SOLVED] Cannot display HTML string

16 Answered Questions

[SOLVED] Change the selected value of a drop-down list with jQuery

3 Answered Questions

[SOLVED] XMLDocument GetElementByID returning null

2 Answered Questions

[SOLVED] Javascript - getElementById() returns null even though the element exists

  • 2016-12-02 18:38:58
  • Akhil Biju
  • 620 View
  • 0 Score
  • 2 Answer
  • Tags:   javascript html css

1 Answered Questions

[SOLVED] getElementById() returns null although the element exists

Sponsored Content