My Javascript/Html traffic Light sequence needs a loop

Question

I need to make sure when the button is clicked the images change but when I test the code the images change but they stop after one cycle. Please give some possible solutions on how to add a loop or make the code repeat ,thanks.

var red = "data:image/gif;base64,R0lGODlhAQABAIABAP8AAAAAACwAAAAAAQABAAACAkQBADs=",
    redorange = "data:image/gif;base64,R0lGODlhAQABAIABAP9aAAAAACwAAAAAAQABAAACAkQBADs=",
    green = "data:image/gif;base64,R0lGODlhAQABAIABAAD/AAAAACwAAAAAAQABAAACAkQBADs=",
    orange = "data:image/gif;base64,R0lGODlhAQABAIABAP+qAAAAACwAAAAAAQABAAACAkQBADs=";

var lights = [red, redorange, green, orange];
var lightCounter = 0;

function pictureChange(){
  lightCounter += 1;
  document.getElementById('traffic').src = lights[lightCounter];
}

h1 {
  text-align: center;
}

img {
  display: block;
  margin: 0 auto;
}

<h1><b> Traffic Lights </b></h1>

<center>
  <button onclick="pictureChange()">Change Lights</button>
</center>

<br><br>

<img width="230" height="400" id="traffic" src="data:image/gif;base64,R0lGODlhAQABAIABAP8AAAAAACwAAAAAAQABAAACAkQBADs=">

add the javascript code you tried

Suraj Rao
– Suraj Rao

2016-12-31 15:22:44 +00:00
Commented Dec 31, 2016 at 15:22 — Suraj Rao
– Suraj Rao, Commented Dec 31, 2016 at 15:22

Kiran.B · Accepted Answer · 2016-12-31 15:21:24Z

1

After document.getElementById('traffic').src=lights[lightCounter];, you need to have if (lightCounter==3) lightCounter=0; because you only have 4 elements in the array while your loop is going beyond 4.

answered Dec 31, 2016 at 15:21

Kiran.B

2452 silver badges9 bronze badges

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

2 Comments

TheCompStudentAJ Over a year ago

Now, when it repeats on the third cycle it skips red light I am not sure how to change that? Thank you for the help you have given.

Kiran.B Over a year ago

This should be your code:

function pictureChange(){         document.getElementById('traffic').src=lights[lightCounter];         lightCounter+=1;         (lightCounter==3) lightCounter=0;     }

Gerardo Furtado · Accepted Answer · 2017-01-01 04:53:48Z

You can use the remainder operator to loop your array:

The remainder operator returns the remainder left over when one operand is divided by a second operand.

So, given that your array is:

var lights = ["red", "orangered", "green", "orange"]

If you do:

lights[lightCounter % 4]

For an increasing lightCounter, you'll have the indices: 0, 1, 2, 3, 0, 1, 2, 3, 0, 1, 2, 3, etc...

var red = "data:image/gif;base64,R0lGODlhAQABAIABAP8AAAAAACwAAAAAAQABAAACAkQBADs=",
    redorange = "data:image/gif;base64,R0lGODlhAQABAIABAP9aAAAAACwAAAAAAQABAAACAkQBADs=",
    green = "data:image/gif;base64,R0lGODlhAQABAIABAAD/AAAAACwAAAAAAQABAAACAkQBADs=",
    orange = "data:image/gif;base64,R0lGODlhAQABAIABAP+qAAAAACwAAAAAAQABAAACAkQBADs=";

var lights = [red, redorange, green, orange];
var lightCounter = 0;

function pictureChange(){
  lightCounter += 1;
  document.getElementById('traffic').src = lights[lightCounter % 4];
}

h1 {
  text-align: center;
}

img {
  display: block;
  margin: 0 auto;
}

<h1><b> Traffic Lights </b></h1>

<center>
  <button onclick="pictureChange()">Change Lights</button>
</center>

<br><br>

<img width="230" height="400" id="traffic" src="data:image/gif;base64,R0lGODlhAQABAIABAP8AAAAAACwAAAAAAQABAAACAkQBADs=">

Collectives™ on Stack Overflow

My Javascript/Html traffic Light sequence needs a loop

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related