CODEWITHSUNDEEP
javascripthtml
Jeothesmar
Jeothesmar

Reputation: 37

Getting "Cannot read property 'innerHTML' of null" but I have that id initiated

I have read on here that usually this problem comes up when the specific div isn't loaded yet or just isn't there. I have this code looping so even if it wasn't fully loaded the first time it will be by the next iteration. Also I for sure have a div with the id participants.

    <div id="participants">
         <div class="sectionhead wow bounceInUp" data-wow-duration="2s">
            <span class="bigicon icon-user"></span>
            <h3>Participants<h3>
            <h4>Check out who has signed up already!</h4>
            <hr class="separetor">

            <div id"test" onload="updateVariables()">
            </div>
         </div>
    </div>


<script>
setInterval(function(){
    updateVariables();
},4000);
updateVariables = function() {
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        var info = xmlhttp.responseText;
        console.log(info);
        var out = info.split("\n");
        console.log(out[1]);
        var outLen = out.length;
        for(x = 0; x < outLen; x++){
          document.getElementById("test").innerHTML += out[x];
          document.getElementById("test").innerHTML += "<br>";
        }
    }
  }
xmlhttp.open("GET","../php/tour.txt",true);
xmlhttp.send();
}
</script>

Upvotes: 0

Views: 984

Answers (1)

Kirill Slatin
Kirill Slatin

Reputation: 6143

That's pretty simple. In your real page you have a simple typo mistake. Instead of 

<div id"test" onload="updateVariables()">

You should have 

<div id="test" onload="updateVariables()">

EDIT: the easiest way to locate such errors on your own is debugging. I consider at the moment that Chrome dev tools is the best option, however you can use dev tools F12 of any browser, since this problem is simple. I will demonstrate an example on Chrome.

In console you will see errors happening. To the right of the error you can see a link to the place in sources where it happens. enter image description here A click on (index):247 takes you there in debugger window. Where you can place a breakpoint. Once you hit the breakpoint you have very powerful tools provided by Chrome. You can add variables to watch list, you can execute any code in console, you can trace the DOM (Elements tab) at current moment. enter image description here The typo of interest can be easily located by copying the code you suppose is working to console document.getElementById("test").

Now you start getting puzzled what the heck it returns null instead of a div. You go to elements tab and search for test by Ctrl+F. You find the text in html however after roaming around with beer you notice that the id is actually not defined due to wrong syntax

Upvotes: 3

Related Questions