Changing text displayed at end of countdown in timer script

[foxclone]

I’m using a timer script that I’d like to change the displayed text 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.

[requinix]

That code has a line which changes the text (according to the amount of time left). It also has a if block that does something when the countdown ends.

[foxclone]

@requinix - Thanks for the reply. What I'm trying to change is the text in the <p> section. What you're suggesting puts additional text on the page. I thought of putting that text in a variable and replacing that text at the end of the countdown, but I don't know where to place it initially.

[requinix]

The simplest answer would be to give the <p> an ID like the <span> does, then modify its contents...

[foxclone]

@requinix - Thanks. Fixed 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>

NOTE: Added second if statement.

 

[gizmola]

Nice job foxclone. 

A few notes:

• My main suggestion for you is to replace your use of var with the appropriate let and const keywords, as that is the current (ES6) way to declare variables.  People don't use var anymore for reasons you can explore more fully yourself.
  • If a variable is a base javascript type that is not an object, and that value won't change, then use const.  Also use const if it is an object (in most cases).  Otherwise use let.
• One other thing that is a good practice to get into, is to not use ';' as javascript doesn't require a semi-colon to end a statement.  Trying to avoid using semi-colons will make your javascript more concise and help remind you of the syntactical differences between php and js, when you are switching back and forth between them.
• When you consider your code, the check for timeleft <= 0 will be true when your counter is == to 0, so there is no reason to have a separate condition check for that.  Do both things you need to do (clearInterval, update your paragraph to 'done') within that same condition

Here's a refactor for you, implementing all the comments above---

     let timeleft = 10

     const downloadTimer = setInterval(function() {
         timeleft--
         document.getElementById("countdowntimer").textContent = timeleft
         if (timeleft <= 0) {
            clearInterval(downloadTimer)
            document.getElementById("test").textContent = "Update Complete"
         }
       
     }, 1000)
     downloadTimer() 

 

 

[foxclone]

@gizmola - Thanks for the reply and javascript instruction. That was the first time I dealt with js and was able to build that little script that took hours to put together