爲什麼我的代碼導致（編輯:)我的頁面崩潰？

我試圖隨機加載一些圖像到頁面的html div，我的代碼有時可以工作，就像在第一頁加載，但也許第二或第三它會導致頁面空白，緩衝和崩潰的標籤。下面是完整的文件的鏈接（不包括圖像SRCS）：爲什麼我的代碼導致（編輯:)我的頁面崩潰？

下面是完整的js文件：（要小心，因爲如果你重裝了幾次它會崩潰的標籤） https://repl.it/GBvG/2

var topnum = 7; //will later be used to represent current index 
var rando; //will later be used as a swap index 
var temporary; //will later be used as a temporary holder so we can swap rando and topnum 
var myCard = document.getElementsByClassName('card'); 
var myArray = [ 
    'Images/aceheart.png', 
    'Images/aceheart.png', 
    'Images/kingheart.png', 
    'Images/kingheart.png', 
    'Images/queenheart.png', 
    'Images/queenheart.png', 
    'Images/tenheart.png', 
    'Images/tenheart.png' 
]; 

function create(){ 

    while(topnum > 0){ //loops over all 8 elements 
      rando = Math.floor((Math.random() * topnum) + 0); 
     //will swap elements as long as the random index we got is not the same as the current index 
     if(myArray[rando] !== myArray[topnum]){ 

      temporary = myArray[topnum]; 
      myArray[topnum] = myArray[rando]; //randomizes topindex value 
      myArray[rando] = temporary; 
     topnum--; 
     }; // end of if  
     }; //end of while 

    for(var i = 0; i <= 8;i++){ 
     var imgElement = "<img src='" + myArray[i] + "' alt='test' width='200px' height='275px'/>"; 
     myCard[i].innerHTML = imgElement; 

    }; //end of for loop 


}; // end of create

我幾乎積極的問題是這個片段，但我不知道爲什麼：

for(var i = 0; i <= 8;i++){ 
    var imgElement = "<img src='" + myArray[i] + "' alt='test' width='200px' height='275px'/>"; 
    myCard[i].innerHTML = imgElement; 

}; //end of for loop

來源

2017-03-01 Moe Chughtai

我嚴重懷疑那個代碼會導致堆棧溢出錯誤。 – Pointy

在你的while循環中，如果if條件爲false，toponum永遠不會被減少。 –

@GerardoFurtado，你的建議可能是唯一的溢出原因。如果我是你，我會將這個評論推廣到一個答案。 – tafa

你有8張卡，但你的循環運行9次迭代。

變化

for(var i = 0; i <= 8;i++)

要

for(var i = 0; i < 8;i++) // use `<` instead of `<=`

而且，赫拉爾多·費塔朵在評論中提到的，你應該把topnum--的if外面的while循環。否則，你將會有一個無限循環。

while(topnum > 0) { 
    rando = Math.floor((Math.random() * topnum) + 0); 
    if(myArray[rando] !== myArray[topnum]){ 
    // ... 
    } 
    topnum--; // <-- move the decrement here 
}

來源

2017-03-01 05:35:54 nem035

爲什麼我的代碼導致（編輯:)我的頁面崩潰？

回答

相關問題