Javascript 控制台：未捕获的 TypeError：无法读取 displaynone 处为 null 的属性“style”
2017-02-10
1050
我正在编写一个简单的 javascript 滑块，它应该显示一张幻灯片，然后在 5 秒后显示该幻灯片的 display:none，然后显示下一张幻灯片。我收到控制台错误“Uncaught TypeError：无法读取 displaynone 处 null 的属性‘style’。”以下是 slider7.js 的内容：
window.onload = function () {
var imgid = [];
var numberOfSlides = document.getElementById("slide-container").childElementCount;
console.log("total slide count is: " + numberOfSlides);
for (i = 1; i <= numberOfSlides; i++) {
console.log("here's the value of i: " + i);
imgid.push("img-" + i);
}
console.log("The full contents of the array are " + imgid);
function displaynone() {
document.getElementById(imgid[j]).style.display = "none";
}
for (j = 0; j < numberOfSlides; j++) {
console.log("identify each image id in turn: " + imgid[j]);
document.getElementById(imgid[j]).style.display = "block";
window.setTimeout(displaynone, 5000);
}
};
我将滑块内容包装在 window.onload 中，以确保所有 html 对象都已完全加载。我还检查了 HTML，以确保我所设置样式的元素 ID 存在：
<body>
<div id="slide-container">
<img id="img-1" src="005.jpg">
<img id="img-2" src="006.jpg">
<img id="img-3" src="007.jpg">
<img id="img-4" src="008.jpg">
<img id="img-5" src="009.jpg">
</div>
<script src="slider7.js"></script>
</body>
console.log 的相关部分读取：
The full contents of the array are img-1,img-2,img-3,img-4,img-5
identify each image id in turn: img-1
identify each image id in turn: img-2
identify each image id in turn: img-3
identify each image id in turn: img-4
identify each image id in turn: img-5
观察发现，下面的代码行仅在包装在 window.setTimeout 函数中时才会生成控制台错误：
document.getElementById(imgid[j]).style.display = "none";
如果我从函数中删除此行并将其简单地放在包含“display ="block"”的行下方，它会将内联显示设置为无，但没有任何时间延迟。感谢您的任何见解！
2个回答
不使用 windows.onload，尝试以这种方式执行 js 函数。
<body onload="your function">
使用 css 在初始阶段隐藏所有图像。
kamprasad
2017-02-10
jesuisgenial
2017-02-10