获取“无法读取属性'innerHTML'的null”但我启动了该id

Question

我在这里读到，当特定的div尚未加载或者没有加载时，通常会出现此问题。我有这个代码循环，所以即使它没有完全加载第一次它将在下一次迭代。此外，我肯定有一个div与id参与者。

    <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> 

Answer 1

这很简单。在您的真实页面中，您有一个简单的拼写错误。而不是

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

你应该

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

编辑：自行定位此类错误的最简单方法是调试。我认为目前Chrome开发工具是最佳选择，但您可以使用任何浏览器的开发工具 F12 ，因为这个问题很简单。我将在Chrome上演示一个示例。

在控制台中，您会看到发生错误。在错误的右侧，您可以看到指向源位置的链接。 单击(index):247将在调试器窗口中显示。你可以在哪里放置一个断点。一旦达到断点，您就拥有了Chrome提供的非常强大的工具。您可以将变量添加到监视列表，您可以在控制台中执行任何代码，您可以在当前时刻跟踪DOM（元素选项卡）。 通过将您认为正在使用的代码复制到控制台document.getElementById("test")，可以轻松找到感兴趣的错字。

现在你开始感到困惑的是它返回null而不是div。您转到元素选项卡并按 Ctrl + F 搜索test。您可以在html中找到文本，但是在使用啤酒漫游之后，您会注意到由于语法错误而导致id实际上未定义