title: How to change the box into random colors continuously
body: <p>I am experimenting with the <code>setInterval</code> and <code>setTimeout</code> functions by changing the background color of div. </p>
  
  <p>What I am trying to achieve here is I would like the box to change into random colors <strong>continuously</strong>. I also have a function that I can stop the box from changing its color by clicking the box.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var colorChanger = document.getElementById("colour-changer");
  var r = Math.round(Math.random()*255);
  var g = Math.round(Math.random()*255);
  var b = Math.round(Math.random()*255);
  
  function changeColor(){
  
    colorChanger.style.backgroundColor =  "rgb("+r+","+g+","+b+")";
  
  }
  
  var myTimer = setInterval(changeColor, 3000);
  var running = true;
  
  colorChanger.onclick = function(){
  
    if(running) {
      clearInterval(myTimer);
      colorChanger.innerHTML = "Timer stopped";
      running = false;
    } else {
      myTimer = setInterval(changeColor, 3000);
      colorChanger.innerHTML = "";
      running = true;
    }
   
  };</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#colour-changer {
    width:200px;
    height:100px;
    margin:30px auto;
    background-color:#fff;
  
    -webkit-transition:background-color 0.7s;
    -moz-transition: background-color 0.7s;
    transition:background-color 0.7s;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>  &lt;div id="colour-changer"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Why isn't this changing the random colors continuously?</p>