traffic light sequence, html, javascript and css

Question

I am trying to make a program that displays a traffic light sequence. I have made a mistake in the code so it doesn't get past showing the red light when the "starts sequence" button is clicked. if you can see where I went wrong please help me get it working.

I have used functions to change the display of the different lights. when the start sequence button is clicked the change function should call each function (stop,ready,go) which change the brightness of the lights in order from red to amber to green and back.

function change() {

  setTimeout(stop, 2000);
  setTimeout(ready, 2000);
  setTimeout(go, 2000);
  setTimeout(ready, 2000);
  setTimeout(stop, 2000);

}

function stop() {
  aimg = document.getElementById("a");
  bimg = document.getElementById("b");
  cimg = document.getElementById("c");
  aimg.style.filter = "brightness(2)";
  bimg.style.filter = "brightness(0)";
  cimg.style.filter = "brightness(0)";
}

function go() {
  aimg = document.getElementById("a");
  bimg = document.getElementById("b");
  cimg = document.getElementById("c");
  aimg.style.filter = "brightness(0)";
  bimg.style.filter = "brightness(0)";
  cimg.style.filter = "brightness(2)";
}


function ready() {
  aimg = document.getElementById("a");
  bimg = document.getElementById("b");
  cimg = document.getElementById("c");
  aimg.style.filter = "brightness(0)";
  bimg.style.filter = "brightness(2)";
  cimg.style.filter = "brightness(0)";
}

.container {
  height: 450px;
  width: 200px;
  border: 5px solid;
  ;
}

.top {
  position: absolute;
  top: 30px;
  left: 35px;
}

.middle {
  position: absolute;
  top: 175px;
  left: 35px;
}

.bottom {
  position: absolute;
  top: 320px;
  left: 35px;
}

<html>

<body>
  <div class="container"></div>
  <button id="traffic" onClick="change()">start sequence</button><br>
  <div class="top">
    <img src="aRed.png" alt="Red" id="a"><br>
  </div>
  <div class="middle">
    <img src="bAmber.png" alt="Amber" id="b"><br>
  </div>
  <div class="bottom">
    <img src="cGreen.png" alt="Green" id="c"><br>
  </div>
</body>

</html>

something alike ? codepen.io/gc-nomade/pen/YVWeQq set a snippet with image we can see and a clear description of your issue ;) ... so your question can be reopened . pen related to stackoverflow.com/questions/43563313/css-animation-sequence/… — G-Cyrillus
– G-Cyrillus, Commented Dec 6, 2020 at 15:29

Kokodoko · Accepted Answer · 2020-12-10 18:15:30Z

You're calling all setTimeout at the same time, so they all trigger after 2 seconds. You could solve it by calling each timeout after the previous one has finished. Also, you don't need to find the elements again in each function call.

let aimg = document.getElementById("a");
let bimg = document.getElementById("b");
let cimg = document.getElementById("c");

function change() {
  setTimeout(stop, 2000);
}

function stop() {
  aimg.style.filter = "brightness(2)";
  bimg.style.filter = "brightness(0)";
  cimg.style.filter = "brightness(0)";
  setTimeout(ready, 2000);
} 

function ready() {
  aimg.style.filter = "brightness(0)";
  bimg.style.filter = "brightness(2)";
  cimg.style.filter = "brightness(0)";
  setTimeout(go, 2000);
}

function go() {
  aimg.style.filter = "brightness(0)";
  bimg.style.filter = "brightness(0)";
  cimg.style.filter = "brightness(2)";
  setTimeout(stop, 2000);
}

Bear in mind that if you call change() more than once, you'll start multiple sequences. You could prevent that by storing a interval id for each of the three timeouts

readyTimeout = setTimeout(ready, 2000);

And then canceling them all when the button is pressed:

clearTimeout(readyTimeout);

Collectives™ on Stack Overflow

traffic light sequence, html, javascript and css

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related