我正在編寫一個簡單的JavaScript滑塊,該滑塊應該顯示幻燈片,然後顯示5秒後:顯示下一個幻燈片滑動。我得到控制檯錯誤「Uncaught TypeError:無法在displaynone上讀取null屬性'樣式'。」下面是slider7.js的內容:Javascript控制檯:未捕獲TypeError:無法在displaynone上讀取屬性'style'爲null
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";
如果我從功能中刪除此行和簡單地把它含有「顯示=‘塊’」線之下,它設置內聯展示爲無,但沒有任何時間延遲。感謝任何見解!