title: Why is my clearInterval not working?
body: <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;title&gt;Lab 10&lt;/title&gt;  
  
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"&gt;&lt;/script&gt;  
  &lt;/head&gt;  
  &lt;body style="background-color:lightgreen;"&gt;
  
      &lt;input type="button" id="btnSetInterval" value="log every 3 seconds" &gt;&lt;br /&gt;
      &lt;input type="button" id="btnCancelSetInterval" value="cancel the logging every 3 seconds"&gt;&lt;br /&gt;
      &lt;input type="button" id="btnSetTimeout" value="create an event to run 3 seconds from now" /&gt;&lt;br /&gt;
  
      &lt;input type="button" id="btnCancelSetTimeout" value="cancel the event that is supposed to run 3 seconds from now" /&gt;    
  
  
  
  &lt;script type="text/javascript"&gt;
  
  $(document).ready(function() {
      var intervalID;
  
      var timeoutID;
  
      function setIntervalCounter() {
          var intervalID = setInterval(function() {
          console.log("Hello World");
          }, 3000)
          }
  
      function stopIntervalCounter() {  
          clearInterval(intervalID);
          };  
      $("#btnSetInterval").click(setIntervalCounter);
      $("#btnCancelSetInterval").click(stopIntervalCounter); 
  
  });    
  
  &lt;/script&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p>// When I push the first button, the counter starts, but I am not able to stop the counter.
  // I hope this is the correct way to add comments, sometimes I lose my code in the view 
  // I know this question is asked many times, and I have tried all solutions. :( 
     </p>