2017-02-10 112 views
0

我正在編寫一個簡單的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"; 

如果我從功能中刪除此行和簡單地把它含有「顯示=‘塊’」線之下,它設置內聯展示爲無,但沒有任何時間延遲。感謝任何見解!

回答

0

不使用windows.onload嘗試執行這樣的方式JS溫控功能。

<body onload="your function"> 

使用css隱藏初始階段的所有圖像。

相關問題