CODEWITHSUNDEEP
javascripthtmlbutton
E. Lauretta
E. Lauretta

Reputation: 25

How do i add a button to this JavaScript and HTML code so that when i press the button, my traffic light sequence runs once?

I want to run this code with user input (a button) but i'm not sure how to. Also, i got some of this code from the internet, and so i still don't quite understand why there are 6 colours in the colour variable's array, instead of just 3 (red, yellow, green). I don't really understand the if statement enough to write about it either, so if you could explain why i actually need the var time, that would be great. Thank you!

var time = 5;

function lights() {
  var red = document.getElementById('redLight')
  var yellow = document.getElementById('yellowLight')
  var green = document.getElementById('greenLight')
  var Colours = ["#FF0000", "#FFB300", "#05FF0D", "#7A0000", "#7A5C00", "#008000"];
  if (time == 5) {
    red.style.background = Colours[0]; 
    yellow.style.background = Colours[4];
    green.style.background = Colours[5];
    time = 1;
  } else if (time == 2 || time == 4) {
    red.style.background = Colours[3];
    yellow.style.background = Colours[1];
    green.style.background = Colours[5];
  } else if (time == 3) {
    red.style.background = Colours[3];
    yellow.style.background = Colours[4]
    green.style.background = Colours[2];

  }
  time += 1
};
setInterval(function() {
  lights();
}, 2000);
  <h1> Traffic Light </h1>
        <div id="redLight"></div>
        <div id="yellowLight"></div>
        <div id="greenLight"></div>
        <div id="box"></div>

Upvotes: 0

Views: 56

Answers (3)

ahitisham ahamad
ahitisham ahamad

Reputation: 1

var time = 5;

function lights() {
  var red = document.getElementById('redLight')
  var yellow = document.getElementById('yellowLight')
  var green = document.getElementById('greenLight')
  var Colours = ["#FF0000", "#FFB300", "#05FF0D", "#7A0000", "#7A5C00", "#008000"];
  if (time == 5) {
    red.style.background = Colours[0]; 
    yellow.style.background = Colours[4];
    green.style.background = Colours[5];
    time = 1;
  } else if (time == 2 || time == 4) {
    red.style.background = Colours[3];
    yellow.style.background = Colours[1];
    green.style.background = Colours[5];
  } else if (time == 3) {
    red.style.background = Colours[3];
    yellow.style.background = Colours[4]
    green.style.background = Colours[2];

  }
  time += 1
};
setInterval(function() {
  lights();
}, 2000);
  <h1> Traffic Light </h1>
        <div id="redL"></div>
        <div id="yellowL"></div>
        <div id="greenL"></div>
        <div id="box"></div>

Upvotes: 0

mrboberson
mrboberson

Reputation: 3

Use <button onclick=></button>. You can, alternatively, use onclick with <div> as well: <div onclick=></div>.

Upvotes: 0

JustARandomProgrammer
JustARandomProgrammer

Reputation: 277

You can add a button with <button onclick="test()"></button> And then you put you interval in the function that I called test. Like: function test(){setInterval(lights(),2000)

Upvotes: 1

Related Questions