title: Struggling to use variables in a repeating timer to merely change time remaining on a webpage
body: <p>Using a greasemonkey fork called Violetmonkey to try to make a dynamic timer on a retro website <a href="https://riseoftyrants.com/age2/" rel="nofollow noreferrer">https://riseoftyrants.com/age2/</a></p>
  <p>I don't know if you need an account to see the event timer. But events happen for 15 minutes out of at most every 20 minutes, so when you visit you may see what I'm trying to edit.</p>
  <pre><code>const tables = document.querySelectorAll(&quot;div.d1l&quot;);
    alert(tables[2].innerText);
  bling = tables[2].innerText.match(/(\d\d):(\d\d)/i); //&quot; (\d\d):(\d\d)/i&quot;); //Ends: 01:58  first capture group $1 is minutes and $2 is seconds
  min = bling[1];
  sec = bling[2];
  //alert(min + &quot;...&quot; + sec);
  console.log(&quot;Alpha&quot;);
  
  setInterval(function (){
    tables[2].innerText=Brick(min,sec);
    console.log(&quot;Beta&quot;);
  },1000);
  
  function Brick(min,sec) {
    console.log(&quot;Gamma&quot;);
    sec = sec-1;
    if (sec&lt;0){
      min=min-1;
      sec=59;
    }
    return &quot;Ends: &quot; + min + &quot;:&quot; + sec;
  }
  </code></pre>
  <p>The timer updates as I'd expect. Well, I still have to do some manipulating for a leading zero on the seconds component. But it only updates one time. The console log shows me that the functions keep running because Beta and Gamma keep populating in the log. But how am I supposed to let the function update min and sec, or at least pass those values onto the next call?</p>
  <p>I suppose I can just repeat grabbing the variables off the webpage after the script updates them, but that seems atrocious.</p>
  <p>Any previous answers on this tell me functions use local variables and if you need a global variable to define it outside of the function. Did I not do that? What is wrong?</p>