Javascript 我如何通过点击按钮使这个交通灯序列工作？？？_Javascript_Html

Javascript 我如何通过点击按钮使这个交通灯序列工作？？？

javascript html

Javascript 我如何通过点击按钮使这个交通灯序列工作？？？,javascript,html,Javascript,Html,所以，我可以让它从红色变为琥珀色，但我一直在思考如何进一步让它变为绿色，再变回琥珀色，然后再变为红色。任何帮助都将不胜感激另外，我在dreamwaver上创建了这个 <!DOCTYPE html> <html> <head> </head> <body> <h1>Traffic Lights </h1> <img id="light" img src="../../red.jpg

所以，我可以让它从红色变为琥珀色，但我一直在思考如何进一步让它变为绿色，再变回琥珀色，然后再变为红色。任何帮助都将不胜感激

另外，我在dreamwaver上创建了这个

<!DOCTYPE html> 
<html> 
<head>
</head>
<body>  

   <h1>Traffic Lights </h1>  

  <img id="light" img src="../../red.jpg"> 

  <button type="button" onClick="changeLights()">Change Lights</button>


   <script>

    function changeLights(){

   document.getElementById('light').setAttribute("src","../../amber.jpg")

   document.getElementById('light').setAttribute("src","../../green.jpg")

   document.getElementById('light').setAttribute("src","../../amber.jpg")

   //document.getElementById('light').setAttribute("src","../../red.jpg")


   }

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


交通灯
换灯
函数changeLights（）{
document.getElementById（'light'）.setAttribute（“src”、“../../amber.jpg”）
document.getElementById（'light'）.setAttribute（“src”、“../../green.jpg”）
document.getElementById（'light'）.setAttribute（“src”、“../../amber.jpg”）
//document.getElementById（'light'）.setAttribute（“src”、“../../red.jpg”）
}

最好的解决方案是将图像名称放入数组中，并使用计数器在数组中循环。该计数器可以增加或减少计数，具体取决于我们上次命中的阵列的“末端”

另外，不要使用内联HTML事件处理属性（

onclick

，等等），因为它们会创建“意大利面代码”，它们会导致全局包装函数改变

此

绑定，并且不遵循标准。而是使用通过代码将元素连接到事件处理程序

//获取对DOM元素的引用：
var img=document.getElementById（'light'）；
var btn=document.getElementById（'btn'）；
//将按钮的点击链接到事件处理功能
btn.addEventListener（“单击”，更改灯光）；
//将图像名称放入数组：
var imgs=[“green.jpg”、“amber.jpg”、“red.jpg”]；
//建立反变量和方向变量
var计数=0；
var加性=1；
函数changeLights（）{
//通过基于当前计数器值从数组中获取元素来设置图像
img.setAttribute（“src”、“../../”+imgs[count]）；
//行动核查
console.clear（）；
控制台日志（img）；
//当我们撞到边缘时，反方向，
如果（计数==2）{
加法=-1；//向后走
}否则如果（计数===0）{
加法=1；//前进
}
//相应地调整计数
计数+=加法；
}

交通灯
更改指示灯

您难道不希望3（或4）

setAttribute（）之间的更改发生得如此之快，以至于您在运行脚本时都无法注意到吗？您是否尝试使用浏览器的开发工具（点击F12）调试该功能，并查看一步一步进行的操作？您希望在每次单击时更改颜色还是自动更改颜色？