javascript - 获取 "Cannot read property ' innerHTML' of null"，但我启动了该 id

Question

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

    <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。您转到 elements 选项卡并通过 Ctrl+F 搜索 test。您在 html 中找到了文本，但是在带着啤酒漫游后，您注意到由于语法错误，实际上没有定义 id