如何使用图像阵列制作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代码更改图像

回答

相关问题