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

Question

我正在尝试制作一个交通信号灯序列，以便当我按下“更改信号灯”按钮时，它应该在每次按下时都会更改。 但是，我已经使代码显示为红色，但是当我按下“更改指示灯”按钮时，它不会更改为琥珀色和其他指示灯顺序。

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

Answer 1

您可以将括号放在引号上onclick="changeLights"()
您在name属性后没有= -您看到它与其他属性不同并且无效的html吗？
您正在尝试选择一个带有JS的DOM节点，该节点在插入文档之前就已运行（您的脚本标签在图像上方执行）
您正在设置没有单位的宽度和高度，并且不建议像这样设置宽度和高度以提高响应能力（只是建议，不是错误）。 在我的示例中，我只是自然地使图像适合而无需指定。
您没有在阵列中正确插入新项目，而是四次将阵列重新分配给新图像（使用push ）

 var traffic_light = []; var traffic_lights = 1; function initLights() { var image; image = new Image(); image.src = "http://www.drivingtesttips.biz/images/traffic-light-red.jpg"; traffic_light.push(image); image = new Image(); image.src = "http://www.drivingtesttips.biz/images/traffic-lights-red-amber.jpg"; traffic_light.push(image); image = new Image(); image.src = "http://www.drivingtesttips.biz/images/traffic-lights-amber.jpg"; traffic_light.push(image); image = new Image(); image.src = "http://www.drivingtesttips.biz/images/traffic-lights-green.jpg"; traffic_light.push(image); } function changeLights() { document.traffic_light_images.src = traffic_light[traffic_lights].src; traffic_lights++; if (traffic_lights > 3) { traffic_lights = 0; } } initLights();

 <button type="button" onclick="changeLights()">Change Lights </button> <img src="http://www.drivingtesttips.biz/images/traffic-light-red.jpg" name="traffic_light_images">

但是，无需仅切换源就可以创建新的图像对象，并且可以简化代码：

 const imageBasePath = 'http://www.drivingtesttips.biz/images/'; const traficLights = [ 'traffic-light-red.jpg', 'traffic-lights-red-amber.jpg', 'traffic-lights-amber.jpg', 'traffic-lights-green.jpg', ]; const trafficLightImage = document.querySelector('.traffic-light-image'); let trafficLightIndex = 1; function changeLights() { trafficLightImage.src = imageBasePath + traficLights[trafficLightIndex]; trafficLightIndex++; if (trafficLightIndex === traficLights.length) { trafficLightIndex = 0; } }

 <button type="button" onclick="changeLights()">Change Lights</button> <img src="http://www.drivingtesttips.biz/images/traffic-light-red.jpg" class="traffic-light-image" />

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

问题描述

1 个解决方案

解决方案1
1 2017-01-26 15:45:51

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

问题描述

1 个解决方案

解决方案1 1 2017-01-26 15:45:51

解决方案1
1 2017-01-26 15:45:51