title: clearInterval() not working
body: <blockquote>
    <p><strong>Possible Duplicate:</strong><br>
    <a href="https://stackoverflow.com/questions/8266726/js-how-to-clear-interval-after-using-setinterval">JS - How to clear interval after using setInterval()</a>  </p>
  </blockquote>
  
  
  
  <p>I have a function that changes the <code>font-family</code> of some text every 500 ms using <code>setInterval</code> (I made it just to practice JavaScript.) The function is called by clicking on an "on" button and the interval is supposed to be cleared using a separate button, "off". However, the "off" button doesn't actually clear the interval, it just continues. I suspect that this has something to do with scope but I'm not sure how to write it any other way. Also, I don't want to do this with jQuery because, after all, I'm doing it to learn.</p>
  
  <pre><code>&lt;body&gt;
  &lt;p&gt;&lt;span id="go" class="georgia"&gt;go&lt;/span&gt; Italian&lt;/p&gt;
  &lt;p&gt;
      &lt;button id="on" type="button" value="turn on"&gt;turn on&lt;/button&gt;
      &lt;button id="off" type="button" value="turn off"&gt;turn off&lt;/button&gt;
  &lt;/p&gt;
  
  &lt;script&gt;
  var text = document.getElementById("go");
  var on = document.getElementById("on");
  var off = document.getElementById("off");
  
  var fontChange = function() {
      switch(text.className) {
          case "georgia":
              text.className = "arial";
              break;
          case "arial":
              text.className = "courierNew";
              break;
          case "courierNew":
              text.className = "georgia";
              break;      
      }
  };
  
  on.onclick = function() {
      setInterval(fontChange, 500);
  };
  
  off.onclick = function() {
      clearInterval(fontChange);
  }; 
  &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>