Javascript 使用计数器/索引在单击时循环浏览图像数组_Javascript_Arrays_Indexing_Counter

Javascript 使用计数器/索引在单击时循环浏览图像数组

javascript arrays indexing

Javascript 使用计数器/索引在单击时循环浏览图像数组,javascript,arrays,indexing,counter,Javascript,Arrays,Indexing,Counter,当我点击按钮时，我试图创建通过交通灯序列的代码。我知道有很多人都有同样的问题，但是他们得到的解决方案似乎都不起作用-我只能在网页上显示第一个资源（红色交通灯），当我点击按钮时，什么都没有发生。。。也许我只是需要我的代码校对，而有一些很明显的错误我犯了？这是我的密码： <!DOCTYPE html> <html> <body> <h1>JavaScript Task 3</h1> <img id="image" src=

当我点击按钮时，我试图创建通过交通灯序列的代码。我知道有很多人都有同样的问题，但是他们得到的解决方案似乎都不起作用-我只能在网页上显示第一个资源（红色交通灯），当我点击按钮时，什么都没有发生。。。也许我只是需要我的代码校对，而有一些很明显的错误我犯了？这是我的密码：

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Task 3</h1>
    <img id="image" src="red.png" style="width:200px">
    <input type="button" onclick="nextpic()" value="change image" >

<script>
var image = document.getElementById("image");
var counter = 0;
var trafficlights = [
    "redamber.png",
    "amber.png",
    "green.png",
    "red.png"
];
function nextpic(){
    counter =counter+1;
    if (counter == trafficlights.length){
        counter = 0;
    }
    image.src = trafficlights[counter];
}

</script>
</body>
</html>


JavaScript任务3
var image=document.getElementById（“image”）；
var计数器=0；
可变交通灯=[
“redamber.png”，
“amber.png”，
“green.png”，
“red.png”
];
函数nextpic（）{
计数器=计数器+1；
if（计数器==交通灯.长度）{
计数器=0；
}
image.src=交通灯[计数器]；
}

code工作正常，确保您的代码在窗口内。onload函数似乎可以工作：只需说您可以这样编写

nextpic

函数：

function nextpic（）{image.src=trafficlights[counter]；counter=（counter+1）%trafficlights.length；}