Javascript: Can't get element using getElementById

Question

Ok. I need fresh eyes because I'm still on this s***d problem for one hour!

Here is my simple HTML code (testssio.html) that include javascript script:

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript">
        var ssio = document.getElementById('ssio');
        ssio.html = "it finally works!";
    </script>
</head>
<body>
    <div id="ssio"></div>
</body>
</html>

But it doesn't work! Using the debugger, I get:

Uncaught TypeError: Cannot set property 'html' of null          /testssio/:6

Does anyone get it? I know it's not the correct place to look for debugging help, but I'll be crazy if I don't get it! So please, any help?

Tahnks in advance.

score 5 · Accepted Answer · edited Dec 12 '17 at 21:46

The reason for this is that scripts in the head load before the page is rendered. This means your content is not yet rendered and therefore not a part of document.

If you want to see this work, try moving your script below the element renders, like this:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="ssio"></div>
<script type="text/javascript">
    var ssio = document.getElementById('ssio');
    ssio.innerHTML = "it finally works!";
</script>
</body>
</html>

A more standardized way of doing this is with events. Many people use jQuery but it can be done with plain js. This would mean changing your script like this:

<script type="text/javascript">
  function WinLoad() {
    var ssio = document.getElementById('ssio');
    ssio.innerHTML = "It finally works!";
  }
  window.onload = WinLoad;
</script>

This way you can still leave it in the <head>.

Also, using .html is from jQuery. It is generally used as .html(content). If you want to use the plain javascript version use .innerHTML = content.

I mention jQuery so much because it is a highly used API. This quote is from their site:

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

jfriend00 · Answer 2 · 2012-09-09T16:51:48.100

2

Your code is running too early before the DOM is loaded and thus document.getElementById() doesn't find the element in the document yet.

You can either move your script tag down to right before the </body> tag or you can wait for the DOM to load before running your code with either the window onload event or a DOMReady event.

edited Sep 09 '12 at 16:51

answered Sep 09 '12 at 16:41

jfriend00

580,699
78
809
825

score 1 · Answer 3 · answered Sep 09 '12 at 16:44

There are two errors here. First, you need to put the SCRIPT tag after the element. Second, it's not .html, but .innerHTML. So here is the corrected code:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <div id="ssio"></div>
        <script type="text/javascript">
        var ssio = document.getElementById('ssio');
        ssio.innerHTML = "it finally works!";
    </script>
</body>
</html>

score 0 · Answer 4 · answered Sep 09 '12 at 16:45

you can use something like this

  <!DOCTYPE html>
    <html>
   <head>
    <script type="text/javascript">
   document.onload= function(){
    var ssio = document.getElementById('ssio');
    ssio.html = "it finally works!";
    }
</script>
</head>
<body>
<div id="ssio"></div>

Javascript: Can't get element using getElementById

4 Answers4

Linked

Related