Traffic light Sequence Javascript

Here is my code for a traffic light's sequences. I was wondering how I could add a timer in to change the traffic light colour every 3 seconds, for example, when the button is clicked. Thanks!

<!DOCTYPE html> 
<html> 
<body>  
  <h1>JavaScript Task 3</h1> 
  <p>This is  my Traffic Light script</p> 
  <img id="light" src="./assets/red.jpg">
  <button type="button" onclick="changeLights()">Change Lights</button>  
  <script> 
    var list = ["./assets/red.jpg","./assets/redamber.jpg", "./assets/green.jpg","./assets/amber.jpg" ];
    var index = 0;
    function changeLights() {
      index = index + 1;      
      if (index == list.length) 
        index = 0;      
      var image = document.getElementById('light');     
      image.src = list[index]; 
    } 
  </script>  
</body> 
</html>   

Answers:

Answer

Use the setInterval function.

The first parameter is the function you want to call and the second parameter is how often it should be called, in milliseconds.

var timer = setInterval(changeLights,3000);

var list = ["./assets/red.jpg","./assets/redamber.jpg",     "./assets/green.jpg","./assets/amber.jpg" ];
var index = 0;
function changeLights() {
     index = index + 1;      
if (index == list.length) 
index = 0;      
var image = document.getElementById('light');     
image.src=list[index]; } 
  var timer = setInterval(changeLights,3000);
<h1>JavaScript Task 3</h1> 
<p>This is  my Traffic Light script</p> 
<img id="light" src="./assets/red.jpg"> <button type="button" 
onclick="changeLights()">Change Lights</button>  

Answer

You can set a static timer with setTimeout(function, time);

In your case, if you want a repeating timer every 3 seconds constantly, you can have setTimeout run every time the changeLights() function ends

See w3schools article on timing

var timer;
function changeLights() {
    index = index + 1;      
    if (index == list.length) 
    index = 0;      
    var image = document.getElementById('light');     
    image.src=list[index];

    timer = setTimeout("changeLights", 3000);
}

With that change, once you start the lights, the function will repeat every 3 seconds.

The timer variable also alows you to stop the timer (perhaps in your case with another button) with:

clearTimeout(timer);

Hope this helps

Answer
var TrafficLights = new array();

This line is causing all of your errors. Remove it and everything should work.

You do not need this line since the next line is:

var TrafficLights = ["TrafficLights.png", "RedLights.png", "YellowLights.png", "GreenLights.png"]

This declares and defines TrafficLights to be an array, there is no need for the previous line.

NOTE: If you want to make a blank array, do var TrafficLights = []; (preferred) or var TrafficLights = new Array; (note the uppercase 'A').

Answer

This is an interesting one. So there's an exception with assigning new array() assignment, since array is not a valid thing, as shown in the previous answers:

var TrafficLights = new array();
VM276:1 Uncaught ReferenceError: array is not defined
    at <anonymous>:1:25

One would assume that the code below this error did not get evaluated...

...however, clicking the button actually invokes the ChangeLights function correctly, which yields a different error:

VM81:66 Uncaught TypeError: Cannot read property 'length' of undefined
at ChangeLights (VM81:66)
at HTMLButtonElement.onclick (VM83:56)

So the ChangeLights function gets declared, while TrafficLights did not. Why is that?

I think this is because the TrafficLights variable never gets declared because of the first error, yet the function is available because it was hoisted before the first exception is even thrown!

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.