如何使用圖像陣列製作JavaScript代碼更改圖像

-2

<html> 
<body> 


<button onclick="ChangeLights()">Change Lights</button> 

<img src="redlight.jpg" id="traffic" width="83" height="232"> 

<script> 
    var imgarray = ["redlight.jpg", "yellowlight.jpg", "greenlight.jpg"]; 
    document.getElementById("traffic").innerHTML = traffic; 
    function ChangeLights(){ 
     document.getElementById("traffic").src = "redlight.jpg"; 
    } 

    function ChangeLights() { 
     if (traffic.src.match(imgarray[0])){ 
      traffic.src = imgarray[1]; 
     }else if (traffic.src.match(imgarray[1])){ 
      traffic.src = imgarray[2]; 
     }else if (traffic.src.match(imgarray[2])){ 
      traffic.src = imgarray[3]; 
     } 
    } 
</script> 
</body> 
</html>

只要我按下按鈕，圖像就不會出現。如何使用圖像陣列製作JavaScript代碼更改圖像

來源

2016-12-28 Zein

什麼是「交通」？你從來沒有定義它。您還定義了兩次「ChangeLights」函數，這看起來很混亂。 – putvande

你想要達到什麼目的？你需要一個可以根據點擊的按鈕來改變圖像的功能，或者你想要功能來改變圖像的循環？ –

當我測試它時，它工作正常。我無法重現這個問題。 – Quentin

-1

試試這個

<html> 

<body> 
<button onclick="ChangeLights()">Change Lights</button> 
<img src="redlight.jpg" id="traffic" width="83" height="232"> 
<script> 
    var imgarray = ["redlight.jpg", "yellowlight.jpg", "greenlight.jpg"]; 

    function ChangeLights() { 
     if (traffic.src.match(imgarray[0])) { 
      traffic.src = imgarray[1]; 
     } else if (traffic.src.match(imgarray[1])) { 
      traffic.src = imgarray[2]; 
     } else if (traffic.src.match(imgarray[2])) { 
      traffic.src = imgarray[0]; 
     } 
    } 
</script>

確保圖像是在正確的文件夾，它應該是在相同的目錄中的HTML文件。

來源

2016-12-28 22:53:43 Leeyt

我看到代碼仍然存在問題... – epascarello

這看起來更像是一個現場遊戲，不同於答案。 – Quentin

如何使用圖像陣列製作JavaScript代碼更改圖像

回答

相關問題