Member Avatar for larry29936

I’m using a timer script that I’d like to change the displayed text in the <p> ... </p> when the countdown ends but have no idea how to accomplish it. I’d appreciate any help I can get. Here’s the code I’m using:

<p> The Update will be done in <span id="countdowntimer">20 </span> Seconds</p>

            <script type="text/javascript">
                var timeleft = 20;
                var downloadTimer = setInterval(function(){
                timeleft--;
                document.getElementById("countdowntimer").textContent = timeleft;
                if(timeleft <= 0)
                    clearInterval(downloadTimer);
                },1000);
            </script>

Thanks in advance

  • 2 Contributors
  • 3 Replies
  • 314 Views
  • 1 Hour Discussion Span
  • Latest Post Latest Post by larry29936

Dani AI

Generated

Quick summary: ’s quick edit put the “finished” text into the interval without a guard, so it would replace the countdown on every tick. fixed that by setting the parent <p> when the counter reaches zero — that works, but there are a few common improvements and edge cases worth addressing.

Problems to watch for

  • Off-by-one: decrementing before you render causes the displayed start value to appear one lower than expected. Show the initial value first, then start the ticking.
  • Negative values: network/browser pauses or multiple ticks can make the counter drop below zero. Use a <= check so the finish path always runs.
  • Multiple timers: if the countdown can be started more than once, store the interval id and clear any existing timer before creating a new one.
  • Accessibility: add an aria-live region or role="status" so screen readers announce the final message.

A robust pattern

  • Render the initial number immediately.
  • Start a repeating timer that decrements, updates the display, and only once clears the interval and replaces the message.
  • Return a cancel function so other code can stop the timer safely.

Example (modern, noninvasive, cancellable):

<p id="status">The update will be done in <span id="cd">20</span> seconds.</p>

<script>
(function start(containerId, spanId, startSeconds, doneText) {
  const container = document.getElementById(containerId);
  const display = document.getElementById(spanId);
  if (!container || !display) return;

  let remaining = Math.max(0, Number(startSeconds) || 0);
  display.textContent = String(remaining);

  const tick = () => {
    remaining -= 1;
    if (remaining <= 0) {
      clearInterval(handle);
      container.setAttribute('aria-live', 'polite');
      container.textContent = doneText || 'Update complete.';
      return;
    }
    display.textContent = String(remaining);
  };

  const handle = setInterval(tick, 1000);
  window.cancelCountdown = () => clearInterval(handle);
})('status', 'cd', 20, 'Update complete.');
</script>

Troubleshooting: if the final text never appears, log the remaining value inside the tick to confirm ordering, and make sure you don’t accidentally start multiple intervals without clearing the previous one.

Recommended Answers

All 3 Replies

Member Avatar for Dani

I’m exercising on the stationary bike right now but as soon as I’m done, I’ll type the code out from my computer. It’s too difficult to type code from mobile.

Member Avatar for Dani 
<script type="text/javascript">
    var timeleft = 20;
    var downloadTimer = setInterval(function(){
    timeleft--;
    document.getElementById("countdowntimer").textContent = timeleft;
    if(timeleft <= 0)
        clearInterval(downloadTimer);

        // Add this line
        document.getElementById("countdowntimer").textContent = 'Countdown Over!';
    },1000);
</script>
Edited by Dani
Member Avatar for larry29936

Fixed by adding a second if statement like this:

<p id="test"> The Update will be done in <span id="countdowntimer">10 </span> Seconds</p>

    <script type="text/javascript">
        var timeleft = 10;
        var downloadTimer = setInterval(function(){
        timeleft--;
        document.getElementById("countdowntimer").textContent = timeleft;
        if(timeleft <= 0)
           clearInterval(downloadTimer);
        if(timeleft == 0)
           document.getElementById("test").textContent = "Update Complete";   
        },1000);

    </script>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.