Javascript 如何使用onclick（）更改图像（&；如果重复声明？_Javascript_Html_Arrays_If Statement

Javascript 如何使用onclick（）更改图像（&；如果重复声明？

javascript html arrays if-statement

Javascript 如何使用onclick（）更改图像（&；如果重复声明？,javascript,html,arrays,if-statement,Javascript,Html,Arrays,If Statement,我是javascript新手，需要帮助解决一个问题我有3个交通灯图像，我想改变每次点击。单击鼠标从绿色变为琥珀色，再单击鼠标从琥珀色变为红色，然后从红色变为绿色，以此类推我在下面有一些代码，但第一次单击它似乎就从绿色变为红色感谢您的帮助谢谢 <!DOCTYPE html> <html> <body> <button onclick="nextLight()">Click here</button> <img id="d

我是javascript新手，需要帮助解决一个问题

我有3个交通灯图像，我想改变每次点击。单击鼠标从绿色变为琥珀色，再单击鼠标从琥珀色变为红色，然后从红色变为绿色，以此类推

我在下面有一些代码，但第一次单击它似乎就从绿色变为红色

感谢您的帮助

谢谢

<!DOCTYPE html>
<html>
<body>

<button onclick="nextLight()">Click here</button>

<img id="demo" src="green.png">

<script>

function nextLight() {
    var lights = ["blank.png", "green.png", "amber.png", "red.png"]
    if (document.getElementById("demo").src == lights[1]) {
        document.getElementById("demo").src = lights[2];
    } else if (document.getElementById("demo").src == lights[2]) {
        document.getElementById("demo").src = lights[3];
    }
}

</script>

</body>
</html>


点击这里
函数nextLight（）{
var lights=[“blank.png”、“green.png”、“amber.png”、“red.png”]
if（document.getElementById（“demo”）.src==lights[1]）{
document.getElementById（“demo”）.src=lights[2]；
}else if（document.getElementById（“demo”）.src==lights[2]）{
document.getElementById（“demo”）.src=lights[3]；
}
}

我建议使用

开关

语句：

函数nextLight（）{
var demo=document.getElementById（“demo”）；
var灯=[
“”，//空白
"http://i.imgur.com/oisXdU3.png“，//绿灯
"http://i.imgur.com/qmwYgq7.png“，//橙色灯光
"http://i.imgur.com/fs6Rl1W.png“//红灯
];
开关（demo.src）{
案例灯[1]：demo.src=灯[2]；中断；
案例灯[2]：demo.src=灯[3]；中断；
案例灯[3]：demo.src=灯[1]；中断；
}
}

点击这里

要做到这一点，我认为这种方法要简单得多：

var lights = ['', '', '', ''];
var currentLight = 0;

// This version will loop (Go from red to blank at the end)
function nextLight() {
   currentLight = (currentLight + 1) % lights.length;
   document.getElementById("demo").src = lights[currentLight];
}

// This version do what you want (no loop, just display each image and then do nothing)
function nextLight() {
  // Test if the next is not out of range
  if(currentLight + 1 < lights.length - 1) {
     document.getElementById("demo").src = lights[++currentLight];
  }
}

var-lights=[''，''，''，''；
var-currentLight=0；
//此版本将循环（最后从红色变为空白）
函数nextLight（）{
currentLight=（currentLight+1）%lights.length；
document.getElementById（“demo”）.src=lights[currentLight]；
}
//这个版本做你想做的（没有循环，只显示每个图像，然后什么也不做）
函数nextLight（）{
//测试下一个是否未超出范围
如果（当前灯光+1<灯光长度-1）{
document.getElementById（“demo”）.src=lights[++currentLight]；
}
}

您将灯光阵列作为可能的状态。您所需要的只是在它们之间进行迭代

第一次加载琥珀色和红色图像所需的时间有问题，因为它们仅在状态更改时加载。我添加了一个小预加载程序来解决这个问题

-请注意，我在演示中使用了其他图像

var demo = document.getElementById("demo"); // get the demo element and cache it
var lights = ["green.png", "amber.png", "red.png"]; // array of lights srcs
var currentLight = 0; // current light index holder 

lights.forEach(function(src) { // image preloader
   new Image().src = src;   
});

function nextLight() {
    currentLight++; // add one to currentLight index
    currentLight > 2 && (currentLight = 0); // if it's above 2 change it back to 0
    demo.src = lights[currentLight]; // assign the url to the src
}

可能您分配了两次单击处理程序。然而，您应该熟悉“有限状态机”以及如何实现它们。FSM符合您的要求。