Geek Answers Handbook

How can I repeat this traffic light sequence several times when the> button is pressed

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>
Run codeHide result

This is for my coursework on ICT, we need to create a traffic light system, and my code still works. However, as soon as I press a button on the screen, and each click moves cyclically through possible combinations, the traffic light completes its sequence, it will not happen again. I am wondering if anyone can help me do the loop, I would appreciate it, thanks, I am new to coding, so sorry if it is turned off.

+4
source share
4 answers

Just write clickTimes = 0;before the last break.

: https://jsfiddle.net/7oa28cta/

+5

javascript , . "stopLight":

document.getElementById("stopLight").className = "blink-several-times";

CSS- CSS , :

.blink-several-times {
  animation: myAnimation linear 4s;
  animation-iteration-count: infinite;
  transform-origin: 50% 50%;
  -webkit-animation: myAnimation linear 4s;
  -webkit-animation-iteration-count: infinite;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: myAnimation linear 4s;
  -moz-animation-iteration-count: infinite;
  -moz-transform-origin: 50% 50%;
  -o-animation: myAnimation linear 4s;
  -o-animation-iteration-count: infinite;
  -o-transform-origin: 50% 50%;
  -ms-animation: myAnimation linear 4s;
  -ms-animation-iteration-count: infinite;
  -ms-transform-origin: 50% 50%;
}

@keyframes myAnimation{
  0% {
    background-color: rgba(0, 128, 0, 0);
  }
  100% {
    background-color: rgba(0, 128, 0, 1);
  }
}

@-moz-keyframes myAnimation{
  0% {
    -moz-transform:  translate(0px,0px)  rotate(0deg) ;
  }
  100% {
    -moz-transform:  translate(200px,0px)  rotate(180deg) ;
  }
}

@-webkit-keyframes myAnimation {
  0% {
    -webkit-transform:  translate(0px,0px)  rotate(0deg) ;
  }
  100% {
    -webkit-transform:  translate(200px,0px)  rotate(180deg) ;
  }
}

@-o-keyframes myAnimation {
  0% {
    -o-transform:  translate(0px,0px)  rotate(0deg) ;
  }
  100% {
    -o-transform:  translate(200px,0px)  rotate(180deg) ;
  }
}

@-ms-keyframes myAnimation {
  0% {
    -ms-transform:  translate(0px,0px)  rotate(0deg) ;
  }
  100% {
    -ms-transform:  translate(200px,0px)  rotate(180deg) ;
  }
}

"animation-iteration-count" . "", .

- -webkit, -o, -moz ..

css CSS, http://cssanimate.com/

+1

var traffic_button = document.querySelector('.traffic-button');

if (traffic_button) {
  traffic_button.addEventListener('click', traffic, false);
}

var clicks = 0;

function traffic() {
  var lights = document.querySelectorAll(this.dataset.lights + ' .bulb');

  if (lights.length !== clicks) {
    switch (clicks) {
      case 0:
        offLights();
        lights[clicks].classList.add('active');
        clicks++;
        break;
      case 1:
        offLights();
        lights[clicks - 1].classList.add('active');
        lights[clicks].classList.add('active');
        clicks++;
        break;
      case 2:
        offLights();
        lights[clicks].classList.add('active');
        clicks++;
        break;
      default:
        break;
    }
  } else {
    offLights();
    clicks = 0;
  }

  function offLights() {
    for (var i = 0; i < lights.length; i++) {
      var element = lights[i];
      if (element.classList.contains('active')) {
        element.classList.remove('active');
      }
    }
  }
}
#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;
}
.bulb.red.active {
  background: red;
}
.bulb.yellow.active {
  background: yellow;
}
.bulb.green.active {
  background: green;
}
<div id="controlPanel">
  <h1 id="button" data-lights="#traffic-light" class="traffic-button button">Switch</h1>
</div>
<div id="traffic-light">
  <div class="bulb red"></div>
  <div class="bulb yellow"></div>
  <div class="bulb green"></div>
</div>
Hide result
+1

:

 case 6:
        document.getElementById('stopLight').style.backgroundColor = "black";
        document.getElementById('slowLight').style.backgroundColor = "black";
        document.getElementById('goLight').style.backgroundColor = "black";
        clickTimes = 1;
        break;

, , for .

0
source

More articles:


All Articles