Error coming as "Cannot set property 'innerHTML' of null"

Question

I am generating html table from Javascript and assign as InnerHTML to a div tag, but its giving an error:

"Uncaught TypeError: Cannot set property 'innerHTML' of null"

<html>
<body>
<div class="fieldlist-vertical-title" style="color:white;left:0px;display:none;" id="rosterlegend">Some text</div>
<script>
   function generateLegend()
       {
       var fullTable ='' fullTable='<Table><TR><Table><TR bgcolor=#FF5733><TD>MM</TD>
       <TD>01:00 to 21:30</TD></TR></Table></TR></Table>'
       document.getElementById('rosterlegend').innerHTML = fullTable
       }
   generateLegend();
</script>
</body>
</html>

Error : Uncaught TypeError: Cannot set property 'innerHTML' of null

Most of the times this happens when you try to run the script when the DOM is not completely loaded. What happens if you run `document.getElementById('rosterlegend')` in the console after the page loads? — Cristian S., Jan 29 '19 at 06:27
Possible duplicate of [Why does jQuery or a DOM method such as getElementById not find the element?](https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) — AuxTaco, Jan 29 '19 at 06:28
@CarlBinalla the script is inside the Body tag after the div tag — Kanishka, Jan 29 '19 at 06:40
You call the function immediately. The DOM is not not loaded. — Bibberty, Jan 29 '19 at 06:42

score 2 · Answer 1 · edited Jan 29 '19 at 06:54

Try changing to something like this, so we ensure the HTML DOM has completed loading first.
Use ES6 template string instead of plain strings!

document.addEventListener('DOMContentLoaded', () => {
  generateLegend();
});

function generateLegend() {
  fullTable = `<Table>
                 <TR>
                   <Table>
                     <TR bgcolor=#FF5733>
                       <TD>MM</TD>
                       <TD>01:00 to 21:30</TD>
                     </TR>
                     <TR bgcolor=#FFFFFF>
                       <TD>EVVV</TD>
                       <TD>09:00 to 05:30</TD>
                     </TR>
                  </Table>
                 </TR>
               </Table>`;

  document.getElementById('rosterlegend').innerHTML = fullTable;
}

<div id="rosterlegend">
  <div>

If you look at the level of question, the next question by her is probably going to be "my code doesn't work in IE 11". — connexo, Jan 29 '19 at 06:55

Monica Acha · Answer 2 · 2019-01-29T06:59:36.867

Removes new lines and extra spaces in the HTML String.

Rest of your code works fine! However it is not a god practice. Ideally you have to wait for the window to be loaded.

window.onload(){
  generateLegend();
}

function generateLegend() {
   var fullTable = " <Table><TR><Table><TR bgcolor=#FF5733><TD>MM</TD><TD>01:00 to 21:30</TD></TR><TR bgcolor=#FFFFFF><TD>EVVV</TD><TD>09:00 to 05:30</TD></TR></Table></TR></Table>";

   document.getElementById('rosterlegend').innerHTML = fullTable;
}
generateLegend();

<div id="rosterlegend">Some text</div>

Nick Parsons · Answer 3 · 2019-01-29T06:59:56.500

0

Your issue is that you are trying to access your div with the id of "rosterlegend" before the DOM has loaded. This means that when your javascript tries to access your element it cannot. One way you can fix this is by adding the load or DOMContentLoaded event listener to your element, where the function will fire once your HTML (including images if you use the load event) and window has loaded. This way your javascript will know about your HTML.

See working example below:

function generateLegend() {
   var fullTable = " <Table><TR><Table><TR bgcolor=#FF5733><TD>MM</TD><TD>01:00 to 21:30</TD></TR><TR bgcolor=#FFFFFF><TD>EVVV</TD><TD>09:00 to 05:30</TD></TR></Table></TR></Table>";

   document.getElementById('rosterlegend').innerHTML = fullTable;
}

window.addEventListener("load", generateLegend); // call your function when the window has loaded

<div id="rosterlegend"></div>

edited Jan 29 '19 at 06:59

answered Jan 29 '19 at 06:45

Nick Parsons

45,728
6
46
64

1

Only problem with onload is that we rely on being the only caller. – Bibberty Jan 29 '19 at 06:48
@Bibberty what do you mean by "only caller"? – Nick Parsons Jan 29 '19 at 06:50
1

When we do `window.onload = myEvent` we can be overridden by a subsequent script saying `window.onload = myOtherEvent` so might be better to consider `window|document.addEventListener('load', myFunction)` as this is multi subscriber. – Bibberty Jan 29 '19 at 06:53
@Bibberty ah, I never thought of that. I've updated my answer, thanks ;) – Nick Parsons Jan 29 '19 at 07:01

Error coming as "Cannot set property 'innerHTML' of null"

3 Answers3