获取“无法读取 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