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
– Carsten Løvbo Andersen, Commented Jan 16, 2023 at 12:48
there are no elements with the id bar or text present in your code — Chris G
– Chris G, Commented Jan 16, 2023 at 12:51
Does this answer your question? How to write a countdown timer in JavaScript? — kemicofa
– kemicofa, Commented Jan 16, 2023 at 12:52

enricw · Accepted Answer · 2023-01-16 12:51:36Z

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, 2023 at 12:51

enricw

2935 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Jay Konrad Over a year ago

Thanks - I thought the event would automatically trigger when loading. My bad. I have added your even handler. Thanks

Jay Konrad Over a year ago

What would now be the best way to define the variables? Within the function, or outside of the function?

enricw Over a year ago

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?

Jay Konrad Over a year ago

no, I only use them here. I ticked the tick :-)

enricw Over a year ago

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.

Collectives™ on Stack Overflow

Creating a Countdown in HTML/JS

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related