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>
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>
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
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').
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!
©2020 All rights reserved.