How do I switch lights on a traffic light sequence?

Question

I'm trying to make a traffic light sequence so that when I press the "change lights" button its supposed to change each time it has been pressed. However, I've the made the code appear with the red light but when I press the "change lights" button it won't change to amber and the other light sequence.

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

You put the parenthesis outside the quotes onclick="changeLights"()
You don't have an = after the name attribute - do you see it's not the same as the others and not valid html?
You are trying to select a DOM Node with JS that is run before it is inserted in the document (your script tag executes above the image)
You are setting width and height without a unit, and setting width and height like that is not recommended for responsiveness (just advice, not an error). In my example I just let the image naturally fit without specifying.
You are not properly inserting new items into the array, instead you reassigned the array to a new image four times (use 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">

However there is no need to create an new image object just to switch the source and your code can be simplified:

 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" />

How do I switch lights on a traffic light sequence?

Question

1 answers

solution1
1 2017-01-26 15:45:51

How do I switch lights on a traffic light sequence?

Question

1 answers

solution1 1 2017-01-26 15:45:51

solution1
1 2017-01-26 15:45:51