How would I automate this traffic light sequence?

Question

 document.getElementById('AllButton').onclick = switchAll; function illuminateRed() { clearLights(); document.getElementById('stopLight').style.backgroundColor = "red"; } function illuminateOrange() { clearLights(); document.getElementById('slowLight').style.backgroundColor = "orange"; } function illuminateGreen() { clearLights(); document.getElementById('goLight').style.backgroundColor = "green"; } function illuminateRedOrange() { clearLights(); document.getElementById('stopLight').style.backgroundColor = "red"; document.getElementById('slowLight').style.backgroundColor = "orange"; } function illuminateBlack() { clearLights(); } function clearLights() { document.getElementById('stopLight').style.backgroundColor = "black"; document.getElementById('slowLight').style.backgroundColor = "black"; document.getElementById('goLight').style.backgroundColor = "black"; } var clickTimes = 0; var change = 1; function switchAll() { clickTimes++; switch (clickTimes) { case 1: clearLights(); document.getElementById('stopLight').style.backgroundColor = "red"; break; case 2: clearLights(); document.getElementById('stopLight').style.backgroundColor = "red"; document.getElementById('slowLight').style.backgroundColor = "orange"; break; case 3: clearLights(); document.getElementById('goLight').style.backgroundColor = "green"; break; case 4: clearLights(); document.getElementById('slowLight').style.backgroundColor = "orange"; break; case 5: clearLights(); document.getElementById('stopLight').style.backgroundColor = "red"; break; case 6: document.getElementById('stopLight').style.backgroundColor = "black"; document.getElementById('slowLight').style.backgroundColor = "black"; document.getElementById('goLight').style.backgroundColor = "black"; clickTimes = 0 break; } } 

 body { font-family: sans-serif; } #controlPanel { float: left; padding-top: 30px; } .button { background-color: gray; color: white; border-radius: 10px; padding: 20px; text-align: center; margin: 90px 40px; cursor: pointer; } #traffic-light { height: 550px; width: 200px; float: left; background-color: #333; border-radius: 40px; margin: 30px 0; padding: 20px; } .bulb { height: 150px; width: 150px; background-color: #111; border-radius: 50%; margin: 25px auto; transition: background 500ms; } 

 <div id="controlPanel"> <h1 id="AllButton" class="button">Switch</h1> </div> <div id="traffic-light"> <div id="stopLight" class="bulb"></div> <div id="slowLight" class="bulb"></div> <div id="goLight" class="bulb"></div> </div> 

Hello, this is my traffic light sequence and it works just fine, however I was wondering how I could automate it, with one button that says Stop and one that says Go and when go is pressed, it keeps looping? Thanks in advance for reading.

Answer 1

As told in comments, I'd use setInterval . But to put this in code, I made this example. Further I put the lights into objects and made it all a bit more compact.

 /* neat light object */ function Light(color, element) { this.color = color; this.element = document.getElementById(element); } Light.prototype = { on: function() { this.element.style.backgroundColor = this.color; }, off: function() { this.element.style.backgroundColor = "black"; } } /* init */ var lights = [new Light("green", "goLight"), new Light("orange", "slowLight"), new Light("red", "stopLight") ]; var sequence = [["green"],["green", "orange"],["red"]], position = 0, timer = null; var go = document.getElementById("go"), stop = document.getElementById("stop"); go.onclick = function() { clearTimeout(timer); timer = setInterval(function() { lights.forEach(function(light) { if (sequence[position].indexOf(light.color) > -1) light.on(); else light.off(); }); if (position++ >= sequence.length-1) position = 0; }, 2000); } stop.onclick = function() { clearTimeout(timer); } 

  body { font-family: sans-serif; } #controlPanel { float: left; padding-top: 30px; } .button { background-color: gray; color: white; border-radius: 10px; padding: 20px; text-align: center; margin: 90px 40px; cursor: pointer; } #traffic-light { height: 550px; width: 200px; float: left; background-color: #333; border-radius: 40px; margin: 30px 0; padding: 20px; } .bulb { height: 150px; width: 150px; background-color: #111; border-radius: 50%; margin: 25px auto; transition: background 500ms; } 

  <div id="controlPanel"> <h1 id="go" class="button">Go</h1> <h1 id="stop" class="button">Stop</h1> </div> <div id="traffic-light"> <div id="stopLight" class="bulb"></div> <div id="slowLight" class="bulb"></div> <div id="goLight" class="bulb"></div> </div>