title: I have a bug with a true or false variable in javascript and html
body: <p>I have a program that is supposed to start changing its background color at the push of a button(It's not a button, it's an <code>&lt;h1&gt;</code>), but when I press it, the background doesn't change. It should change because of the variable change, but other than that, I think the rest works.</p>
  
  <pre><code>var onf = false;
  
  setInterval(timer(), 100);
  
  function startUp(){
  document.getElementById("Temmie").textContent = "Hi";
  turnOn();
  }
  
    function turnOn(){
    document.getElementById("Tem").style.color = 'Chartreuse';
    document.getElementById("Temmie").style.fontFamily = 'Papyrus';
    document.getElementById("Temmie").style.fontSize = '24px';
    onf = true;
  
    }
  
    function timer(){
    if(onf == true){
    t = Math.floor(Math.random() * 3) + 1;
    changeBackground();
    }
    }
  
  
   function changeBackground(){
   if(t == 1){
      document.body.style.background = 'ForestGreen';
   }
  
  if(t == 2){
     document.body.style.background = 'DarkGreen';
  }
  
  if(t == 3){
     document.body.style.background = 'SteelBlue';
  }
  }
  </code></pre>
  
  <p>The "Tem" and "Temmie" tags are connected to a <p> and an , but other than that, this should be enough.</p>