ABinning ABinning - 6 months ago 31
HTML Question

How can I make this traffic light sequence repeat more than once when the button is pressed>

<!DOCTYPE html>
<html lang"en">
<head>
<title>Traffic Lights</title>
<style type="text/css">
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;
}
</style>



</head>
<body>
<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>


<script type="text/javascript">


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";
break;

}
}


</script>

</body>
</html>


This is for my ICT coursework, we have to build a traffic light system and my code is working so far. However, once I press the button on the screen and each click has cycled through the possible combinations, the traffic light has finished its sequence, it won't repeat again. I am wondering if anyone could help me make it loop, I would appreciate it thanks, I am new to coding, so sorry if it is off.

Answer

Just write clickTimes = 0; before the last break.

This is the fiddle: https://jsfiddle.net/7oa28cta/

Comments