Traffic light Sequence Javascript

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!