Search code examples
javascripthtmlcountdown

Creating a Countdown in HTML/JS

I created a simple test page for a timer that counts down from 10 to 0. There should be a bar as well as text showing the progress. So I created this page:

<html>
<head>
      
</head>

<body>

<script>

function ProgressCountdown(timeleft, bar, text) {
  return new Promise((resolve, reject) => {
    var countdownTimer = setInterval(() => {
      timeleft--;

      document.getElementById(bar).value = timeleft;
      document.getElementById(text).textContent = timeleft;

      if (timeleft <= 0) {
        clearInterval(countdownTimer);
        resolve(true);
      }
    }, 1000);
  });
}

</script>

<div>
 <div>
  <progress value="10" max="10" id=pageBeginCountdown"></progress>
  <p> Beginning in <span id=pageBeginCountdownText">10 </span> seconds</p>
 </div>
</div>

</body>
</html>

It is not working, both bar and text do not budge. Where did I go wrong? The page is at https://geheimbund.ddnss.de/test.html - I have been debugging this for hours, but I just cannot get it to work. Would be super-thankful for any help.

I tried everything I could think of. I expect this to work, i.e. the bar and the text should count down to 0.

Solution

  • Based on the posted code alone, you would need an event that runs your function. Also, as pointed out, the functions' variables aren't defined.

    window.addEventListener('load', () => {
            ProgressCountdown();
            });