Automatic traffic light sequence Javascript

Question

I have tried many methods in order to get this to work however I just cant seem to get the image to change automatically in a set time, the code is:

<!DOCTYPE html>
<html>
    <body>
        <h1>JavaScript Task 3</h1>
        <p>This is my Traffic Light script</p>
        <img id="light" src="E:\A452\RED traffic light.jpg">
        <script>
        var list = [
            "RED AMBER traffic light.jpg",
            "GREEN traffic light.jpg",
            "AMBER traffic light.jpg",
            "RED traffic light.jpg"
        ];
        var index = 0;
        function changeLights() {
            index ++;
            if (index == list.length);
            index = 0;
            document.getElementById(light).src = list[index];
         }
         var timer = setInterval(changeLights,3000);
        </script>
    </body>
</html>

those file names are containing a whitespace. You should never use whitespaces in file names and you missed ' ' it should be getElementById('light') — cyr_x
– cyr_x, Commented Mar 3, 2017 at 12:55

uzr · Accepted Answer · 2017-03-03 12:55:21Z

2

There is an error here:

document.getElementById('light').src = list[index]; // Needs ''

Also note when your image changes you will loose the path in the image src property as they are not included in the array of lights.

Also

if (index == list.length); 
    index = 0;

change to

if (index == list.length) { 
    index = 0;
}

answered Mar 3, 2017 at 12:55

uzr

1,2202 gold badges13 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Adam K. · Accepted Answer · 2017-03-03 13:56:19Z

1

To be honest, i wonder if the result is supposed to be just visual, or it has to be also "functional"... You could solve this visually simply by using GIF (yea, not the greatest), or via CSS - not an answer to your question per se. But it might be useful to know your options.

@keyframes red {
  0% {background: red;}
  33% {background: red;}
  34% {background: black;}
  100% {background: black;}
}

@keyframes yellow {
  0% {background: black;}
  33% {background: black;}
  34% {background: yellow;}
  66% {background: yellow;}
  67% {background: black;}
  100% {background: black;}
}

@keyframes green {
  0% {background: black;}
  66% {background: black;}
  67% {background: green;}
  100% {background: green;}
}

.trafficLight {
  height: 120px;
  width: 40px;
  padding:3px;
  background:#CCC;
}

.trafficLight div {
  width: 90%;
  height: 30%;
  margin:7% auto;
  border-radius: 50%;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}

.red {animation-name: red;}
.yellow {animation-name: yellow;}
.green {animation-name: green;}
.trafficLight, .trafficLight div{
  box-shadow:inset 5px 5px 5px rgba(255,255,255,.5),
             inset -5px -5px 5px rgba(0,0,0,.5);
}

<div class="trafficLight">
  <div class="red"></div>
  <div class="yellow"></div>
  <div class="green"></div>
</div>

edited Mar 3, 2017 at 13:56

answered Mar 3, 2017 at 13:11

Adam K.

9106 silver badges18 bronze badges

2 Comments

Adam K. Over a year ago

Fun fact: This whole animation is approx 0.9KB large. Scalable without any loss of detail.

Ryan Anderson Over a year ago

it has to be with pictures and not a gif, I know there are easier ways to achieve the same thing but we are not allowed to use a gif or CSS.

Collectives™ on Stack Overflow

Automatic traffic light sequence Javascript

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related