Javascriptを使用したタイマーの信号灯

Question

配列を使用してシーケンスを通過する信号を作成するように求められました。

私は信号機の色を変えたいと思う度にボタンを押すユーザーと一緒に動作する信号機のライトを作りましたが、私は今、それを作ることを任されています。ボタンを一度クリックすると、自動的にJavaScriptを使用してシーケンスを実行します。

コードで使用される画像は、スクリプトと同じフォルダにあります。

<img id="Change Lights" src="red.gif" width="36" height="98"> 
 

 
<br> 
 
<button onclick="nxt()" id="button">Change colour</button> 
 
</br> 
 

 
<script> 
 
    var img = new Array("red.png", "amberred.png", "green.png", "amber.png"); 
 
    var imgElement = document.getElementById("Change Lights"); 
 
    var lights = 0; 
 
    var imgLen = img.length; 
 

 
    function nxt() { 
 
    if (lights < imgLen - 1) { 
 
     lights++; 
 
    } else { 
 
     lights = 0; 
 
    } 
 

 
    imgElement.src = img[lights]; 
 
    } 
 
</script>

Answer 1

<img id="Change Lights" src="https://placehold.it/36x98/ff0000" width="36" height="98"> 
 

 

 

 
<script> 
 
    var img = ["https://placehold.it/36x98/ffbf00","https://placehold.it/36x98/00ff00","https://placehold.it/36x98/ff0000"]; 
 

 
    var imgElement = document.getElementById("Change Lights"); 
 
    var lights = 0; 
 
    var imgLen = img.length; 
 

 
    function nxt() { 
 
    if (lights < imgLen - 1) { 
 
     lights++; 
 
    } else { 
 
     lights = 0; 
 
    } 
 

 
    imgElement.src = img[lights]; 
 
    } 
 
    
 
    setInterval(nxt,2000); 
 
</script>