title: Why Javascript functions don't work in the coded order?
body: <p>I'm making a studying timer for the Pomodoro technique (25 min studying 5 min breaking). My timer works only when I called it once. If I call it twice or more, it count down to negative minutes and seconds. Moreover, when I called the studying timer first and the breaking timer later, it executes the breaking timer and skips the studying timer.</p>
  <pre><code>let timer;
  function studying(){
      display_quote();
      var min = document.getElementById(&quot;study-min&quot;).value;
      document.getElementById(&quot;state&quot;).innerHTML = &quot;STUDYING&quot;;
      var sec = min*60;
      timer = setInterval(function(){
          minn = Math.floor(sec/60);
          secc = sec%60;
          document.getElementById(&quot;clock&quot;).innerHTML = getTime(minn,secc);
          sec-=1;
          if(sec==-1){
              clearInterval(timer);
              return;
          }
      },1000)
  }
  function breaking(){
      display_quote();
      min = document.getElementById(&quot;break-min&quot;).value;
      document.getElementById(&quot;state&quot;).innerHTML = &quot;BREAKING&quot;;
      sec = min*60;
      timer = setInterval(function(){
          minn = Math.floor(sec/60);
          secc = sec%60;
          document.getElementById(&quot;clock&quot;).innerHTML = getTime(minn,secc);
          sec-=1;
          if(sec==-1){
              clearInterval(timer);
              return;
          }
      },1000)
  }
  </code></pre>
  <p>and here is the looping</p>
  <pre><code>for(var t=1;t&lt;=loop;t++){
          studying();
          breaking();
      }
  </code></pre>