CODEWITHSUNDEEP
javascript
Samantha Ashamu
Samantha Ashamu

Reputation: 1

How do I switch lights on a traffic light sequence?

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>

Upvotes: 0

Views: 612

Answers (1)

nanobar
nanobar

Reputation: 66375

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

Upvotes: 1

Related Questions