title: Overlapping progress bars. How to clear past progress bar, when new one starts
body: <p>I have the following function which starts a 10 second progress bar when it's called.</p>
  
  <pre><code>function timer() {
    var timeleft = 10;
    var downloadTimer = setInterval(function(){
     if(timeleft &lt;= 0){
       clearInterval(downloadTimer);
     }
     document.getElementById("timer-bar").value = 10 - timeleft;
     timeleft -= 1;
    }, 1000);
  };
  </code></pre>
  
  <p>It's used as a sort of visual countdown. Sometimes the function is called a 2nd or 3rd time, before the progress bar has completed.  This causes overlapping progress bars in the same "timer-bar" element.  Is there a way to clear the prior progress bar before starting a new one?  Thank you very much, I appreciate the help.</p>