Question

<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>

每当我按下按钮时，图像都不会出现。

Answer 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文件位于同一目录中。

如何使用图像阵列使JavaScript代码更改图像

1 个答案: