title: SetInterval(), ClearInterval() timer questions for javascript
body: <p>Hey guys so I'm trying to make an interval timer where the user inputs the number of rounds, length of working interval and length of resting interval.  So if the user inputs 30 sec for work, 10 seconds for rest, and 10 rounds, the timer will display "WORK" for the title and run for 30 seconds,and then the title will change to "REST" and run for 10 more seconds (40 seconds total).  Once 40 seconds is reached, the timer will go back to 0 and continue to do this for 9 more rounds (10 in total).  I've never created a timer before so I am a little confused.  I have gotten the timer to work, but I am having trouble changing the title and restarting the timer at each round.  Below are copies of both my HTML and Javascript.  any help is much appreciated!</p>
  
  <p>Javascript:</p>
  
  <pre><code>var time = 0;
  var running = 0;
  var rounds = document.getElementById("numRounds").value;
  var work = document.getElementById("numWork").value;
  var rest = document.getElementyId("numRest").value;
  
  
  function startPause()
  {
      if(document.getElementById("numRounds").value == "" | document.getElementById("numWork").value == "" | 
          document.getElementById("numRest").value == ""){
              document.getElementById("error").innerHTML = "*All fields are required.";
          }
      else{
          if(running == 0){
              running = 1;
              increment();
              document.getElementById("startPause").innerHTML = "Pause";
          }
          else{
              running = 0;
              document.getElementById("startPause").innerHTML = "Resume";
          }
      }
  }
  
  function reset()
  {
      running = 0;
      time = 0;
      document.getElementById("startPause").innerHTML = "Start";
      document.getElementById("output2").innerHTML = "00:00:00";
  }
  function work(){
      time++;
      var mins = Math.floor(time/10/60);
      var secs = Math.floor(time/10 % 60);
      var tenths = time % 10;
      if(mins &lt; 10){
          mins = "0" + mins;
      }
      if(secs &lt; 10){
          secs = "0" + secs;
      }
      document.getElementById("output").innerHTML = mins + ":" + secs + ":" + tenths;
      increment(); 
      if(secs &lt; work){
          document.getElementById("work").innerHTML = "WORK";
      }
      var total = work + rest;
      else if(secs &gt;= work &amp;&amp; secs&lt; total){
          document.getElementById("work") = "REST";
      }
      else{
          clearInterval();
          increment();
      }
  }
  function increment()
  {
      if(running == 1){
          for(var i=0;i&lt;rounds; i++){
              setTimeout(work(),100);
          }
      }
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code> &lt;?xml version="1.0" encoding="UTF-8"?&gt;
   &lt;!DOCTYPE html
       PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
   &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"&gt;
   &lt;head&gt;
   &lt;link href='http://fonts.googleapis.com/css?family=Nixie+One' rel='stylesheet' type='text/css'/&gt;
   &lt;link rel="stylesheet" type="text/css" href="css/workitt.css"/&gt; 
       &lt;script type="text/javascript" src="js/stopwatch.js"&gt;&lt;/script&gt;     
      &lt;title&gt;Workitt&lt;/title&gt;
   &lt;/head&gt;
   &lt;body&gt;
      &lt;div class="header" style="margin: 0 auto"&gt;
      &lt;h1&gt;&lt;img src="images/workitt-header.jpg" alt="header" /&gt;&lt;/h1&gt;
        &lt;ul id="navbar"&gt;
              &lt;li&gt;&lt;a href="workitt.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&amp;nbsp;|&amp;nbsp;&lt;/li&gt;
              &lt;li&gt;&lt;a href="createworkout.html"&gt;Custom&amp;nbsp;Workout&lt;/a&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="strength.html"&gt;Strength&amp;nbsp;Workout&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="cardio.html"&gt;Cardio&amp;nbsp;Workout&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="stretching.html"&gt;Stretching&amp;nbsp;Workout&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="swimming.html"&gt;Swimming&amp;nbsp;Workout&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="office.html"&gt;Office&amp;nbsp;Workout&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;&amp;nbsp;|&amp;nbsp;&lt;/li&gt;
              &lt;li&gt;&lt;a href="library.html"&gt;Workout&amp;nbsp;Library&lt;/a&gt; 
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="upperbody.html"&gt;Upper&amp;nbsp;Body&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="lowerbody.html"&gt;Lower &amp;nbsp;Body&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="cardiowork.html"&gt;Cardio&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="core.html"&gt;Core&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;&amp;nbsp;|&amp;nbsp;&lt;/li&gt;
              &lt;li&gt;&lt;a href="accessories.html"&gt;Fitness&amp;nbsp;Accessories&lt;/a&gt; 
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="fitnesscalculators.html"&gt;Fitness&amp;nbsp;Calculators&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="fitnesstimers.html"&gt;Fitness&amp;nbsp;Timers&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="diary.html"&gt;Fitness&amp;nbsp;Journal&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;div class="clearfix"&gt;&lt;/div&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
        &lt;/ul&gt;
        &lt;p&gt;&amp;nbsp;&lt;/p&gt;
        &lt;/div&gt;    
        &lt;div&gt;&amp;nbsp;&lt;/div&gt;
        &lt;div class="body" style="margin: 0 auto"&gt;
          &lt;div id="work"&gt;WORK&lt;/div&gt;
          &lt;div id="output"&gt;&lt;span class='left'&gt;&amp;nbsp;Round&lt;/span&gt;&lt;span class='right'&gt;Time&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/span&gt;&lt;br/&gt;&lt;span id="output2"&gt;&amp;nbsp;0&amp;nbsp;&amp;nbsp;00:00:00&lt;/span&gt;&lt;/div&gt;
          &lt;p&gt;&amp;nbsp;&lt;/p&gt;
          &lt;p&gt;&amp;nbsp;&lt;/p&gt;
          &lt;p&gt;&amp;nbsp;&lt;/p&gt;
          &lt;p&gt;&amp;nbsp;&lt;/p&gt;
          &lt;div&gt;
              Number of Rounds:&amp;nbsp;&lt;input type="text" id="numRounds" name="Rounds" size="6"/&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;
              Length of Work:&amp;nbsp;&lt;input type="text" id="numWork" name="Work" size="6"/&gt;&amp;nbsp;(seconds)&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;
              Length of Rest:&amp;nbsp;&lt;input type="text" id="numRest" name="Rest" size="6"/&gt;&amp;nbsp;(seconds)
          &lt;/div&gt;
          &lt;br/&gt;
          &lt;div id="controls"&gt;
              &lt;button id="startPause" onclick="startPause()"&gt;Start&lt;/button&gt;
              &lt;button onclick="reset()"&gt;Reset&lt;/button&gt;&lt;br/&gt;&lt;br/&gt;
              &lt;span id="error"&gt;&lt;/span&gt;
          &lt;/div&gt;
          &lt;br/&gt;
        &lt;/div&gt;
        &lt;p&gt;&amp;nbsp;&lt;/p&gt;
        &lt;p&gt;&lt;br /&gt;&lt;br /&gt;&lt;/p&gt;
        &lt;hr style="width: 30%;margin-left: auto, margin-right: auto" /&gt;
        &lt;div style="text-align:center"&gt;Created By: Danielle Hafner&lt;br/&gt;
              &lt;script type="text/javascript"&gt;
                  &lt;!--
                      document.write("Last Modified " + document.lastModified)
                  // --&gt;
              &lt;/script&gt; 
          &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>