CODEWITHSUNDEEP
javascripthtmlcss
Sinclair Scott
Sinclair Scott

Reputation: 11

How to make my stop button cancel my traffic light sequence?

I have created a website that shows a traffic light. When the user clicks on a button, the lights change in sequence. Just wondering, is there a way to have a "stop" button that when the user clicks on it, the sequence stops on the image that it is currently on?

Here is my code:

<!DOCTYPE html>
<html>
<body>

<h1><u> Traffic Light Sequence </u></h1>

<p>Press the button to begin.</p>

<img id="colour" src="F:\TrafficLightRed.jpg">


<button type="button" onclick="changeLights()">Change Lights</button>
<button type="button" onclick="resetLights()">Reset Lights</button>

<script>
  var timeIndex = 0;
  var lightIndex = 0;
  var timer;
  var trafficLight = document.getElementById('colour');
  var lights = [{
    duration: 2,
    image: 'F:\TrafficLightRed.jpg'
  }, {
    duration: 2,
    image: 'F:\TrafficLightRedAmber.jpg'
  }, {
    duration: 2,
    image: 'F:\TrafficLightGreen.jpg'
  }, {
    duration: 2,
    image: 'F:\TrafficLightAmber.jpg'
  }]

  function resetLights() {
    lightIndex = 0
  }

  function changeLights() {
    timeIndex++;
    if(timeIndex == lights[lightIndex].duration) {
      timeIndex = 0;
      trafficLight.src = lights[lightIndex].image;
      lightIndex = lightIndex + 1;
      if(lightIndex == 4) {
        lightIndex = 0
      }
    }
  }
  timer = setInterval(changeLights, 1000);
</script>

</body>
</html>

Upvotes: 0

Views: 517

Answers (2)

Aruna
Aruna

Reputation: 12022

As everyone says, you can use clearInterval to reset this. Anyways, I have refactored your code with clearTimeout and setTimeout below since you haven't effectively handled the duration of each lights.

<!DOCTYPE html>
<html>
<body>

<h1><u> Traffic Light Sequence </u></h1>

<p>Press the button to begin.</p>

<img id="colour" style="width: 100px; height: 100px;">


<button type="button" onclick="changeLights()">Change Lights</button>
<button type="button" onclick="resetLights()">Reset Lights</button>

<script>
  var lightIndex = -1;
  var timer;
  var trafficLight = document.getElementById('colour');
  var lights = [{
    duration: 10,  // seconds
    image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/1/1f/Red_Light_Icon.svg/232px-Red_Light_Icon.svg.png'
  }, {
    duration: 3,  // seconds
    image: 'http://www.caloritherm.hu/assets/images/light-yellow-flash.gif'
  }, {
    duration: 6,  // seconds
    image: 'http://www.clipartkid.com/images/511/green-light-clip-art-l-clip-art-category-clipart-w3ET7s-clipart.png'
  }, {
    duration: 3,  // seconds
    image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/4/45/Yellow_Light_Icon.svg/1024px-Yellow_Light_Icon.svg.png'
  }];

  function resetLights() {
    lightIndex = -1;
    //clearInterval(timer); 
    if(timer) {
      clearTimeout(timer);
      timer = null;
    }
  }

  function changeLights() {  
    if(++lightIndex === lights.length) {
        lightIndex = 0;
    }
       
    trafficLight.src = lights[lightIndex].image;
    timer = setTimeout(changeLights, lights[lightIndex].duration * 1000);
  }
  
  changeLights();
</script>

</body>
</html>

Upvotes: 0

StvnBrkdll
StvnBrkdll

Reputation: 4044

clearInterval() will terminate your interval timer. Try something like:

clearInterval(timer)

Explanation of clearInterval().

Upvotes: 3

Related Questions