javascript changing between three images on a button click

Question

<!DOCTYPE html>
<html>
    <head>
        <script>
            var trafficlights = ['redlight.png','yellowlight.png','greenlight.png'];
            var num = 1

            function lightsequence() {
                document.getElementById('light').src = trafficlights[num];
                num = num + 1;
            }
        </script>
    </head>
    <body>
        <img id="light" src="redlight.png">
        <button onclick="lightsequence()">Change Lights</button>
    </body>
</html>

I have written that piece of code and the images change in order one by one each time I click the button but I cannot think of how to reverse the order if I keep clicking, i.e. traffic lights red yellow green yellow red etc. each time I click. I am unfamiliar with jQuery so would like to not use them ideally but if someone can explain it fully with jQuery in working it will have to do.

dfsq · Accepted Answer · 2016-10-07 14:00:04Z

2

Modulo operator is very convenient in such cases:

document.getElementById('light').src = trafficlights[num++ % trafficlights.length];

Here is a demo:

var trafficlights = [
	'https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/48x48/Circle_Red.png', 
	'https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/48x48/Circle_Yellow.png', 
	'https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/48x48/Circle_Green.png'
];
var num = 1

function lightsequence() {
  document.getElementById('light').src = trafficlights[num++ % trafficlights.length];
}

<img id="light" src="https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/48x48/Circle_Red.png">
<button onclick="lightsequence()">Change Lights</button>

answered Oct 7, 2016 at 14:00

dfsq

193k26 gold badges244 silver badges261 bronze badges

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

3 Comments

MATTHEW PARKER Over a year ago

this works fine but jumps from grenn back upto red where as i want it to change back to red going through yellow

MATTHEW PARKER Over a year ago

yeah i fixed it i just had to add in another yellow image on the end of the varible container

MATTHEW PARKER Over a year ago

I have now done this to the code and fixed the original issue but i want to know if there is a way to get the light sequence to run once automatically each time the button is clicked and pause slightly longer on red than the other colours?

Luis Levi · Accepted Answer · 2019-10-30 08:40:11Z

Change Lights

function lightsequence(){
  
document.getElementById("light").src

if(document.getElementById("light").src=="https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/48x48/Circle_Red.png"){
     document.getElementById("light").src="https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/48x48/Circle_Yellow.png"
    
}else if(document.getElementById("light").src=="https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/48x48/Circle_Yellow.png"){
   document.getElementById("light").src="https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/48x48/Circle_Green.png"
                         
}else{
   document.getElementById("light").src="https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/48x48/Circle_Red.png"
      
      }
}

<img id="light" src="https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/48x48/Circle_Red.png">
<button onclick="lightsequence()">Change Lights</button>

Collectives™ on Stack Overflow

javascript changing between three images on a button click

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related