Traffic light Sequence Javascript

Question

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>

Has your teacher taught you about setTimeout or setInterval? — Mike Cluck
– Mike Cluck, Commented Apr 28, 2016 at 16:23
stackoverflow.com/questions/36920320/… stackoverflow.com/questions/34653900/… stackoverflow.com/questions/37906626/… stackoverflow.com/questions/35920989/… stackoverflow.com/questions/31747318/… stackoverflow.com/questions/37796563/… — le_m
– le_m, Commented Jun 21, 2016 at 9:21
Can we auto tag "traffic light sequence" questions as duplicates? — evolutionxbox
– evolutionxbox, Commented Feb 17, 2017 at 9:58

Wowsk · Accepted Answer · 2016-04-28 16:23:39Z

2

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>

answered Apr 28, 2016 at 16:23

Wowsk

3,6852 gold badges20 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

K. Smith Over a year ago

Thank you, much appreciated!!

Wowsk Over a year ago

If you wouldn't mind you could accept the answer by clicked the green checkmark under the voting button for my answer.

Richard Kille · Accepted Answer · 2016-04-28 16:31:03Z

0

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

answered Apr 28, 2016 at 16:31

Richard Kille

556 bronze badges

1 Comment

K. Smith Over a year ago

Thank you, this really helped!!

Collectives™ on Stack Overflow

Traffic light Sequence Javascript

2 Answers 2

2 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Linked

Related