开发者问题收集

获取“无法读取 null 的属性‘innerHTML’”但我已启动该 id

2015-04-21
980

我在这里读到,这个问题通常是在特定 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> 
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 中找到了文本,但在浏览 beer 后,您注意到由于语法错误, id 实际上并未定义

Kirill Slatin
2015-04-21