我的Javascript/Html流量燈光序列需要一個循環

Question

我需要確保何時點擊按鈕的圖像會改變，但是當我測試代碼時，圖像會改變，但它們會在一個週期後停止。請給出一些關於如何添加循環或重複代碼的可能解決方案，謝謝。

var red = "data:image/gif;base64,R0lGODlhAQABAIABAP8AAAAAACwAAAAAAQABAAACAkQBADs=", 
 
    redorange = "data:image/gif;base64,R0lGODlhAQABAIABAP9aAAAAACwAAAAAAQABAAACAkQBADs=", 
 
    green = "data:image/gif;base64,R0lGODlhAQABAIABAAD/AAAAACwAAAAAAQABAAACAkQBADs=", 
 
    orange = "data:image/gif;base64,R0lGODlhAQABAIABAP+qAAAAACwAAAAAAQABAAACAkQBADs="; 
 

 
var lights = [red, redorange, green, orange]; 
 
var lightCounter = 0; 
 

 
function pictureChange(){ 
 
    lightCounter += 1; 
 
    document.getElementById('traffic').src = lights[lightCounter]; 
 
}

h1 { 
 
    text-align: center; 
 
} 
 

 
img { 
 
    display: block; 
 
    margin: 0 auto; 
 
}

<h1><b> Traffic Lights </b></h1> 
 

 
<center> 
 
    <button onclick="pictureChange()">Change Lights</button> 
 
</center> 
 

 
<br><br> 
 

 
<img width="230" height="400" id="traffic" src="data:image/gif;base64,R0lGODlhAQABAIABAP8AAAAAACwAAAAAAQABAAACAkQBADs=">

Answer 1

可以使用remainder operator要循環array：

餘數運算符返回當一個操作數被分開時餘下的餘數由第二個操作數。

所以，考慮到你的數組是：

var lights = ["red", "orangered", "green", "orange"] 

如果你這樣做：

lights[lightCounter % 4] 

對於越來越lightCounter，你就會有指數：0，1，2， 3,0,1,2,3,0,1,2,3等...

var red = "data:image/gif;base64,R0lGODlhAQABAIABAP8AAAAAACwAAAAAAQABAAACAkQBADs=", 
 
    redorange = "data:image/gif;base64,R0lGODlhAQABAIABAP9aAAAAACwAAAAAAQABAAACAkQBADs=", 
 
    green = "data:image/gif;base64,R0lGODlhAQABAIABAAD/AAAAACwAAAAAAQABAAACAkQBADs=", 
 
    orange = "data:image/gif;base64,R0lGODlhAQABAIABAP+qAAAAACwAAAAAAQABAAACAkQBADs="; 
 

 
var lights = [red, redorange, green, orange]; 
 
var lightCounter = 0; 
 

 
function pictureChange(){ 
 
    lightCounter += 1; 
 
    document.getElementById('traffic').src = lights[lightCounter % 4]; 
 
}

h1 { 
 
    text-align: center; 
 
} 
 

 
img { 
 
    display: block; 
 
    margin: 0 auto; 
 
}

<h1><b> Traffic Lights </b></h1> 
 

 
<center> 
 
    <button onclick="pictureChange()">Change Lights</button> 
 
</center> 
 

 
<br><br> 
 

 
<img width="230" height="400" id="traffic" src="data:image/gif;base64,R0lGODlhAQABAIABAP8AAAAAACwAAAAAAQABAAACAkQBADs=">

Answer 2

document.getElementById('traffic').src=lights[lightCounter];後，你需要有if (lightCounter==3) lightCounter=0;因爲你只需要4個元素的數組中，而你的循環超越4.