按下按钮时,如何使此红绿灯序列重复多次？

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

这是我的ICT课程,我们必须建立一个交通灯系统,我的代码到目前为止.但是,一旦我按下屏幕上的按钮并且每次点击都循环通过可能的组合,红绿灯已完成其序列,它将不再重复.我想知道是否有人可以帮助我让它循环,我将不胜感激,谢谢,我是新编码,很抱歉,如果它关闭.

Answer 1

只是写clickTimes = 0;在最后一个之前break.

这是小提琴:https://jsfiddle.net/7oa28cta/