How do i add a button to this JavaScript/HTML code, so that my code only runs once the button is pressed?

Question

My code runs fine, but i just need a button so that only when the user clicks the button, the code runs. I have tried to use a button before, and it has worked as in when i press it the lights change, but the code still runs as well. Please can you help me get a button so that when i press it, the lights change once. I didn't show my CSS code because it isn't necessary but with it, my code works fine. Thank you!

HTML:

 <div id="box"></div>
    <div id="redCircle"></div>
    <div id="yellowCircle"></div>
    <div id="greenCircle"></div>

JavaScript:

<script>
       var time = 6; 

function lights() {
  var red = document.getElementById('redCircle');
  var yellow = document.getElementById('yellowCircle');
  var green = document.getElementById('greenCircle');
  var Colours = ["#FF0000", "#FFB300", "#05FF0D", "#7A0000", "#7A5C00", "#008000"];
  if (time == 6 || time == 5) {
    red.style.background = Colours[0]; 
    yellow.style.background = Colours[4]; 
    green.style.background = Colours[5]; 
    time = 1;
  } else if (time == 2) 
  {
    red.style.background = Colours[0];
    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];
  } else if (time == 4) {
      red.style.background = Colours[3];
      yellow.style.background = Colours[1];
      green.style.background = Colours[5]; 
   }
    time += 1; 
};
setInterval(function() {
  lights();
}, 1500);
</script>

Answer 1

Based on your comment, I have edited this answer.

Still add this to your html:

<button onClick=runCode()>Run</button>

And here is the entire script code. Note, there is a more elegant way to do this, but this gets the job done.

<script>
    var time = 6;
    var count = 0;
    var run1 = false;
    var run2 = false;
    var run3 = false;
    var run4 = false;
    var lightsRunning = false;

    function lights() {
        var red = document.getElementById('redCircle');
        var yellow = document.getElementById('yellowCircle');
        var green = document.getElementById('greenCircle');
        var Colours = ["#FF0000", "#FFB300", "#05FF0D", "#7A0000", "#7A5C00", "#008000"];
        if (time == 6 || time == 5 && run1) {
            console.log('running 1');
            red.style.background = Colours[0];
            yellow.style.background = Colours[4];
            green.style.background = Colours[5];
            time = 1;
        } else if (time == 2 && run2)
        {
            red.style.background = Colours[0];
            yellow.style.background = Colours[1];
            green.style.background = Colours[5];
        }
        else if (time == 3 && run3) {
            red.style.background = Colours[3];
            yellow.style.background = Colours[4];
            green.style.background = Colours[2];
        } else if (time == 4 && run4) {
                red.style.background = Colours[3];
                yellow.style.background = Colours[1];
                green.style.background = Colours[5];
         }
            time += 1;
    };

    runCode = function(){
        count += 1;
        if (count === 1) {
            run1 = true;
        } else if (count === 2) {
            run2 = true;
        } else if (count === 3) {
            run3 = true;
        } else if (count === 4) {
            run4 = true;
        }

        if (!lightsRunning) {
            setInterval(function() {
                lights();
            }, 1500);
            lightsRunning = true;
        }
    }

</script>

This will prevent your setInterval code from running when the page loads, because everything inside script tags are run when the page loads, and only set it off when the user clicks the button. Additionally, it will execute the sections of the lightsRunning function only as the "Run Code" button is pressed multiple times.

I think this is what you wanted. Alternatively, you could have four buttons, and each one sets a different flag - run1, run2, run3, run4. That would not be hard to implement.

Answer 2

To execute a function when you click on your button, you should use an event handler , in this case it'll be the .onclick handler.

<html>
    <body>
        <button id="myButton" name="myButton">Button!</button>
        <script>
            function hello () {
                alert("Hello click world!");
            }
            document.getElementById("myButton").onclick = hello;
        </script>
    </body>
</html>

This example here will create a button named myButton on the screen, and when you click it, the message Hello click world! will appear on the screen.

In your case, you should put the setInterval code inside of the lights() function and the old content of that inside of the function block of the setInterval call.
After that's done, just bind the onclick event of your button to the lights() function.