title: Countdown Timer Unable to Work Properly In Chrome Extension Popup
body: <p>I'm building a popup chrome extension that works as a countdown timer, but it is not working as intended. When a user inputs a certain amount of minutes, for instance, seconds will immediately turn to 59 and begin decrementing, but minutes will remain static. The same happens with hours.</p>
  <p>This is my html code:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  
  &lt;html lang=&quot;en&quot;&gt;
      &lt;head&gt;
          &lt;link href=&quot;https://fonts.googleapis.com/css2?family=Montserrat:wght@500&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;
          &lt;link href=&quot;../stylesheet.css&quot; rel=&quot;stylesheet&quot;&gt;
          &lt;title&gt;Study Break Chrome Extension&lt;/title&gt;
          &lt;!-- &lt;script src=&quot;jquery.js&quot;&gt;&lt;/script&gt; --&gt;
          &lt;script src=&quot;../popup-script.js&quot;&gt;&lt;/script&gt;
          &lt;script src=&quot;../background.js&quot;&gt;&lt;/script&gt;
          &lt;!-- &lt;script src=&quot;timer.html&quot;&gt;&lt;/script&gt; --&gt;
          &lt;style&gt;
              body {
                font-family: &quot;Monaco&quot;, monospace;
                color: #003c00;
                background-image: url('/media/bg2.JPEG');
                background-repeat: no-repeat;
                background-attachment: fixed; 
                background-size: cover;
              }
              html, body {
                  text-align: center;
                  width: 325px;
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class=&quot;header&quot;&gt;
              &lt;h1&gt;Study Break!&lt;/h1&gt;
          &lt;/div&gt;
          &lt;div class=&quot;container&quot;&gt;
              &lt;div id=&quot;work&quot;&gt;
                  &lt;h2 class = &quot;idk&quot;&gt;Set A Break Every...&lt;/h2&gt; 
                  &lt;p id=&quot;workhrlabel&quot; class=&quot;workhrlabel&quot;&gt;Hours&lt;/p&gt;
                  &lt;p id=&quot;workminlabel&quot; class=&quot;workminlabel&quot;&gt;Minutes&lt;/p&gt;
                  &lt;p id=&quot;workseclabel&quot; class=&quot;workseclabel&quot;&gt;Seconds&lt;/p&gt;
                  &lt;input id=&quot;work-hours&quot; type=&quot;number&quot; max=&quot;99&quot; min=&quot;0&quot; value=&quot;0&quot; class=&quot;worktime&quot;&gt;
                  &lt;p id=&quot;p1&quot; class=&quot;semicolon&quot;&gt;:&lt;/p&gt;
                  &lt;input id=&quot;work-minutes&quot; type=&quot;number&quot; max=&quot;60&quot; min=&quot;0&quot; value=&quot;0&quot; class=&quot;worktime&quot;&gt;
                  &lt;p id=&quot;p2&quot; class=&quot;semicolon&quot;&gt;:&lt;/p&gt;
                  &lt;input id=&quot;work-secs&quot; type=&quot;number&quot; max=&quot;60&quot; min=&quot;0&quot; value=&quot;0&quot; class=&quot;worktime&quot;&gt;
              &lt;/div&gt;
              &lt;div id=&quot;break&quot;&gt;
                  &lt;h2&gt;For...&lt;/h2&gt;
                  &lt;p id=&quot;break-hour-label&quot; class=&quot;break-label&quot;&gt;Hours&lt;/p&gt;
                  &lt;p id=&quot;break-min-label&quot; class=&quot;break-label&quot;&gt;Minutes&lt;/p&gt;
                  &lt;p id=&quot;break-sec-label&quot; class=&quot;break-label&quot;&gt;Seconds&lt;/p&gt;
                  &lt;input id=&quot;break-hours&quot; type=&quot;number&quot; max=&quot;99&quot; min=&quot;0&quot; value=&quot;0&quot; class=&quot;breaktime&quot;&gt;
                  &lt;p id=&quot;p1&quot; class=&quot;semicolon&quot;&gt;:&lt;/p&gt;
                  &lt;input id=&quot;break-minutes&quot; type=&quot;number&quot; max=&quot;60&quot; min=&quot;0&quot; value=&quot;0&quot; class=&quot;breaktime&quot;&gt;
                  &lt;p id=&quot;p2&quot; class=&quot;semicolon&quot;&gt;:&lt;/p&gt;
                  &lt;input id=&quot;break-secs&quot; type=&quot;number&quot; max=&quot;60&quot; min=&quot;0&quot; value=&quot;0&quot; class=&quot;breaktime&quot;&gt;
              &lt;/div&gt;
              &lt;div class = &quot;btns&quot;&gt;
                  &lt;button id=&quot;set&quot; class=&quot;btn&quot;&gt;Set&lt;/button&gt;
                  &lt;button id=&quot;reset&quot; class=&quot;btn&quot;&gt;Reset&lt;/button&gt;
              &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>My popup-script:</p>
  <pre><code>document.addEventListener('DOMContentLoaded', function(){
      document.getElementById('set').addEventListener('click', function(){
          let selHrs = document.getElementById('work-hours').value;
          let selMins = document.getElementById('work-minutes').value;
          let selSecs = document.getElementById('work-secs').value;
  
          chrome.runtime.sendMessage({name: 'Timer', hours: selHrs, mins: selMins, secs: selSecs});
  });
  })
  
  chrome.runtime.onMessage.addListener(function(request, _, _){
      if (request.name == 'updateTimer') {
        
          document.getElementById('work-hours').setAttribute('value', request.hours);
  
          document.getElementById('work-minutes').setAttribute('value', request.mins);
          console.log(request.mins)
          document.getElementById('work-secs').setAttribute('value', request.secs);
  
      }
  
  });
  
  </code></pre>
  <p>And my background-script:</p>
  <pre><code>chrome.runtime.onMessage.addListener(function(request, sender, sendResponse){
      let set = document.getElementById('set');
  
      let hours = request.hours;
      let mins = request.mins;
      let secs = request.secs;
   
      let startTimer = undefined;
  
      if (request.name == &quot;Timer&quot;){
    
          function countdown(hr,mm,ss)
          {
          var interval = setInterval(function(){
  
              if(hr == 0 &amp;&amp; mm == 0 &amp;&amp; ss == 0)clearInterval(interval);
              
              if(ss == 0)
              {
                  ss = 59;
                  
                  if(mm == 0)
                  {
                      mm = 59;
                      if (hr != 0) {
                          hr--;
                      }
                      
                  }
                  else {
                      mm--;
                  }
              } else {
                  ss--;
              }
          console.log(&quot;hours&quot; + hr + &quot;minutes: &quot; + mm + &quot; secondsL &quot; + ss); 
          chrome.runtime.sendMessage({name: 'updateTimer', hours: hr, mins: mm, secs: ss});
          },1000)
          }
          countdown(hours, mins, secs)
      }
  })
  </code></pre>
  <p>Any help will be greatly appreciated!</p>