如何在交通信號燈序列上切換燈？

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