Javascript 如何在交通灯序列上切换灯？_Javascript

Javascript 如何在交通灯序列上切换灯？

javascript

Javascript 如何在交通灯序列上切换灯？,javascript,Javascript,我试着做一个交通灯序列，这样当我按下“更改灯”按钮时，它应该在每次按下时都会改变。然而，我已经使代码显示为红灯，但当我按下更改灯按钮时，它不会更改为琥珀色和其他灯序列 <!DOCTYPE html> <html> <body> <h1>Traffic Light</h1> <button type="button" onclick="changeLights"()>Change Lights

我试着做一个交通灯序列，这样当我按下“更改灯”按钮时，它应该在每次按下时都会改变。然而，我已经使代码显示为红灯，但当我按下更改灯按钮时，它不会更改为琥珀色和其他灯序列

<!DOCTYPE html>
    <html>
    <body>
    <h1>Traffic Light</h1>

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

    <script>

    var traffic_light = new Array(3)
    var traffic_lights = 0

    function lights(){
    traffic_light = new Image(500,800)
    traffic_light.src = "traffic_light_red.jpg";
    traffic_light = new Image(500,800)
    traffic_light.src = "traffic_light_redAmb.jpg";
    traffic_light = new Image(500,800)
    traffic_light.src = "traffic_light_green.jpg";
    traffic_light = new Image(500,800)
    traffic_light.src = "traffic_light_amber.jpg";
    }

    function changeLights() {
    document.traffic_light_images.src = traffic_light[traffic_lights].src
        traffic_lights++
        if(traffic_lights > 3) {
            traffic_lights = 0;
        }

    }
    </script>

    <img src = "traffic_light_red.jpg" name "traffic_light_images" height = "500" width = "800">

    </body>
    </html>

将括号放在引号onclick=changeLights之外 name属性后面没有一个=，您是否看到它与其他属性不同，并且不是有效的html？您正在尝试选择一个带有JS的DOM节点，该节点在插入到您的脚本标记在图像上方执行的文档之前运行您在设置宽度和高度时没有使用任何装置，因此不建议您这样设置宽度和高度，因为这只是建议，而不是错误。在我的示例中，我只是让图像自然地适合，而不指定。您没有正确地将新项目插入数组，而是将数组重新分配给新映像四次使用 var交通灯=[]； var交通灯=1；函数初始化灯光{ var图像；图像=新图像； image.src=http://www.drivingtesttips.biz/images/traffic-light-red.jpg; 交通灯.图像；图像=新图像； image.src=http://www.drivingtesttips.biz/images/traffic-lights-red-amber.jpg; 交通灯.图像；图像=新图像； image.src=http://www.drivingtesttips.biz/images/traffic-lights-amber.jpg; 交通灯.图像；图像=新图像； image.src=http://www.drivingtesttips.biz/images/traffic-lights-green.jpg; 交通灯.图像； } 功能转换灯{ document.traffic\u light\u images.src=交通灯[traffic\u lights].src；交通灯++；如果交通灯>3{ 交通灯=0； } } 初始光；换灯

你的数组从0开始，所以你的检查应该是traffic_lights>=3，不是吗？检查前的数字递增，有效项在0,1,2-在3，索引已经超出范围。因此，在数组[2]上，然后递增到3，它应该重置为0。在我的示例中，我添加了一个绿灯，因此在OP的代码中>=4，如果他正确地将元素插入数组中，也会有4个元素。哦，是的，我没有发现它们有一个绿色的；，所以是的，3级以上就行了