Javascript showing "cannot set property 'innerHTML' of null"

Question

I tried to run the following code which showed up a blank screen

function make() {
    for (var i = 1; i <= 8; i++) {
        var j = "d" + i;
        var c = document.createElement("div");
        c.setAttribute("id",j);
        document.getElementById(j).innerHTML = 'Hello<br>';
    }
}

#d1 {font-family: 'Cinzel';}
#d2 {font-family: 'Cookie';}
#d3 {font-family: 'Great Vibes';}
#d4 {font-family: 'Monoton';}
#d5 {font-family: 'Orbitron';}
#d6 {font-family: 'Pacifico';}
#d7 {font-family: 'Righteous';}
#d8 {font-family: 'Sacramento';}

<!DOCTYPE html>
<html>
<head>
<title>Logo</title>
<link href="https://fonts.googleapis.com/css?family=Cinzel|Cookie|Great+Vibes|Monoton|Orbitron|Pacifico|Righteous|Sacramento" rel="stylesheet">
</head>
<body onload="make()">
</body>
</html>

In the above snippet, I have used a javascript function where i have created 8 elements and seperated each with a line-break . But, Unfortunately, the line containing the 'innerHTML' throws a type error and the rest of the code does not generate the desired output.
Please do help me out!
Thank You

Why not just do c.innerHTML = 'Hello<br>'? You haven't added c to the document yet, so document.getElementById can't find it. — Heretic Monkey
– Heretic Monkey, Commented Oct 14, 2018 at 16:09
The new divs are not placed into the DOM, therefore document.getElementById() doesn't find the new element. — Randy Casburn
– Randy Casburn, Commented Oct 14, 2018 at 16:09
Simpler to do c.innerHTML = 'Hello<br>'; but you also need to insert c somewhere in dom — charlietfl
– charlietfl, Commented Oct 14, 2018 at 16:10

A l w a y s S u n n y · Accepted Answer · 2018-10-14 16:12:04Z

You're missing this very important line document.body.appendChild(c);

You've to insert the element into the document tree using appendChild or insertBefore because the element must be inserted into the DOM before you try to get it by document.getElementById(j)

<!DOCTYPE html>
<html>

<head>
  <title>Logo</title>
  <link href="https://fonts.googleapis.com/css?family=Cinzel|Cookie|Great+Vibes|Monoton|Orbitron|Pacifico|Righteous|Sacramento" rel="stylesheet">
  <style type="text/css">
    #d1 {
      font-family: 'Cinzel';
    }
    
    #d2 {
      font-family: 'Cookie';
    }
    
    #d3 {
      font-family: 'Great Vibes';
    }
    
    #d4 {
      font-family: 'Monoton';
    }
    
    #d5 {
      font-family: 'Orbitron';
    }
    
    #d6 {
      font-family: 'Pacifico';
    }
    
    #d7 {
      font-family: 'Righteous';
    }
    
    #d8 {
      font-family: 'Sacramento';
    }
  </style>
</head>

<body onload="make()">
  <script type="text/javascript">
    function make() {
      for (var i = 1; i <= 8; i++) {
        var j = "d" + i;
        var c = document.createElement("div");
        c.setAttribute("id", j);
        document.body.appendChild(c);
        document.getElementById(j).innerHTML = 'Hello<br>';
      }
    }
  </script>
</body>

</html>

A. Meshu · Accepted Answer · 2018-10-14 16:18:42Z

0

Instead of that line:

document.getElementById(j).innerHTML = 'Hello<br>';

Try this:

c.textContent = 'Hello';

And as comments and answers - you should insert the element into the document tree using appendChild with appendChild(c);

edited Oct 14, 2018 at 16:18

answered Oct 14, 2018 at 16:10

A. Meshu

4,1782 gold badges24 silver badges35 bronze badges

Collectives™ on Stack Overflow

Javascript showing "cannot set property 'innerHTML' of null"

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related