title: Global variable won't change
body: <p>I'm trying to set up a timer to close a modal on an html page. The problem is that I need a global variable to be used in functions, and I can't re-assign a value to this variable.</p>
  
  <p>I've looked for answers on many sites but none of them worked with my code. The value is correctly set when it is declared, but it can't be re-assigned later when I call it in functions (instead of simply reducing it's value).</p>
  
  <p>No errors are detected in the browser's dev-tools.</p>
  
  <pre><code>var delayToCloseModal = 5;
  
  function AnimateModal() {
  
      // Each time this function is called
      delayToCloseModal = 5; // HERE IS THE PROBLEM!!!
                             // delayToCloseModal is not set at 5 again
  
  
      // If the modal isn't oppened
      if (document.getElementById("modal").style.opacity &lt; 0.01) {
          // Open Modal
      }
  
  
      // Check every second if the timer is done, else reduce it by 1
      var checkTimer = setInterval(CheckCounterDone, 1000);
  
  
      function CheckCounterDone() {
          if (delayToCloseModal &gt; 0) {
              // Reduce timer
              delayToCloseModal--; // Strangely, this works really fine!
          }
          else {
  
              // Stop checking timer
              clearInterval(checkTimer);
  
              // Close Modal
  
          }
      }
  }
  </code></pre>
  
  <p>The "timer" system works really fine, the modal automatically close 5 seconds after its opening, but if the function is called again when the modal is already open, it won't reset the open timer to 5.</p>