What is the proper method for activating the lights in a traffic light sequence?

Question

What is the proper method for activating the lights in a traffic light sequence?

I've been working on creating a traffic light sequence where each time the "change lights" button is pressed, the light is supposed to change. However, I'm facing an issue where the code only displays the red light and doesn't switch to amber and the rest of the sequence as intended.

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

javascript

Answer 1

Answer №1

Make sure to place the parenthesis outside the quotes when using onclick="changeLights"()
Check that you have an = after the name attribute - it should match the other attributes for valid HTML
If you are trying to select a DOM Node with JS, ensure that your script executes after the element is inserted into the document (move your script tag below the image)
Avoid setting width and height without a unit for responsiveness; it's recommended to let the image naturally fit or specify units
When inserting new items into an array, use the push method instead of reassigning the array multiple times

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

Remember, there is no need to create a new image object just to switch the source. You can simplify your code:

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

Answer 2

Make sure to place the parenthesis outside the quotes when using onclick="changeLights"()
Check that you have an = after the name attribute - it should match the other attributes for valid HTML
If you are trying to select a DOM Node with JS, ensure that your script executes after the element is inserted into the document (move your script tag below the image)
Avoid setting width and height without a unit for responsiveness; it's recommended to let the image naturally fit or specify units
When inserting new items into an array, use the push method instead of reassigning the array multiple times

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

Remember, there is no need to create a new image object just to switch the source. You can simplify your code:

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

What is the proper method for activating the lights in a traffic light sequence?

Answer №1

Similar questions

Mapping an array of Type T in Typescript using typings

Navigating websites: Clicking buttons and analyzing content

jQuery fails to hide DIVs when jQuery.show() has been utilized in a previous event

The Vuetify navigation drawer seems to have a quirk where it only closes after an item

"I am encountering an issue where I am using React and Express to retrieve data from a database, and although I am able to return an array of

Retention of user-entered data when navigating away from a page in Angular

What is the best way to display a page within a div when clicking in Yii?

Steps for adding a PHP dropdown menu to an HTML/Javascript webpage

bind a class property dynamically in real-time

Alert for JavaScript Increment (++) Operation

Sharing data with external domains and retrieving HTML output using JavaScript

How can I make a variable available on the client side by exporting it from my Node JS server built with express framework?

Is there a way to change a mandatory field to optional in SuiteCRM?

The form within the while loop is only functioning with the initial result

The functionality to move forward and backward in Modal Bootsrap seems to be malfunctioning

AngularJS templateUrl versus template: what's the difference?

Inserting a new key-value pair into each object within an array

Having trouble incorporating Duo Web SDK into angular application

What are the steps to start up a NodeJS API using an Angular app.js file?

Is there a way to deliver information to a specific element on a client's HTML page?