title: How do I correctly use setInterval and clearInterval to switch between two different functions?
body: <p>For practice I am trying to display a number that increments from 0 - 9, then decrements from 9 - 0, and infinitely repeats.<br /><br />The code that I have so far seems to be close, but upon the second iteration the <code>setInterval</code> calls of my 2 respective functions <code>countUp</code> and <code>countDown</code> seem to be conflicting with each other, as the numbers displayed are not counting in the intended order... and then the browser crashes.<br /><br />Here is my code:<br /><br /></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Algorithm Test&lt;/title&gt;
      &lt;/head&gt;
  
      &lt;body onload = "onloadFunctions();"&gt;
          &lt;script type = "text/javascript"&gt;
              function onloadFunctions()
              {
                  countUp();
                  setInterval(countUp, 200);
              }
  
              var count = 0;
              function countUp()
              {
                  document.getElementById("here").innerHTML = count;
                  count++;
  
                  if(count == 10)
                  {
                      clearInterval(this);
                      countDown();
                      setInterval(countDown, 200);
                  }
              }
              function countDown()
              {
                  document.getElementById("here").innerHTML = count;
                  count--;
  
                  if(count == 0)
                  {
                      clearInterval(this);
                      countUp();
                      setInterval(countUp, 200);
                  }       
              }
          &lt;/script&gt;
  
          From 0 - 9, up and down:&amp;nbsp;&amp;nbsp;&lt;div id = "here"&gt;&lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>