title: How do I make sure on/off button stays on and off?
body: <p>I am a new student to JS and I have created a HTML button to toggle on and off colours (the default colour &quot;boxColor&quot; is white)</p>
  <pre><code>var boxColor = 255;
  
  document.querySelector('#toggleOn').addEventListener(&quot;click&quot;, function () {
      toggle(1);
  });
  
  document.querySelector('#toggleOff').addEventListener(&quot;click&quot;, function () {
      toggle(0);
  });
  
  var randomColors = setInterval(function () {
      boxColor = 'rgb(' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ')';
  }, 500);
  
  function toggle(state) {
      if (state == 0) {
          boxColor = 255;
      } else {
          clearInterval(randomColors);
      }
  };
  </code></pre>
  <p>Now, I have the buttons set in HTML and when I opened the page, the colours are being refreshed every second (which is what I want). But when I clicked toggle off to turn it off, it continues to refresh new colours unless I click-and-hold the toggle off button.</p>
  <p>Any ideas on how I could turn the colours from white to random on and off, and that it stays on (or off)?</p>