Creating a Countdown in HTML/JS

Question

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.

Looking at your code and website, I don't see what triggers ProgressCountdown function to start — Carsten Løvbo Andersen, Jan 16 '23 at 12:48
there are no elements with the id `bar` or `text` present in your code — Chris G, Jan 16 '23 at 12:51
Does this answer your question? [How to write a countdown timer in JavaScript?](https://stackoverflow.com/questions/20618355/how-to-write-a-countdown-timer-in-javascript) — kemicofa ghost, Jan 16 '23 at 12:52

score 1 · Accepted Answer · answered Jan 16 '23 at 12:51

1

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();
            });

answered Jan 16 '23 at 12:51

enricw

263
4
19

Thanks - I thought the event would automatically trigger when loading. My bad. I have added your even handler. Thanks – Jay Konrad Jan 17 '23 at 08:18
What would now be the best way to define the variables? Within the function, or outside of the function? – Jay Konrad Jan 17 '23 at 08:25
Accept my answer (by hitting the "tick") if it has solved the problem you posted, so others can benefit from it. As for the variables "bar" and "text", are they also somewhere else in your code? If so, could you add it to the post? – enricw Jan 17 '23 at 13:13
no, I only use them here. I ticked the tick :-) – Jay Konrad Jan 17 '23 at 14:51
but what does document.getElementById(bar).value = timeleft; call? An input field in your html file? I would suggest posting another question with your specific doubt, but you might want to declare them first (var bar; var text;) and then give them a specific value through your function. – enricw Jan 18 '23 at 13:13

Creating a Countdown in HTML/JS

1 Answers1