Jump to content

Changing text displayed at end of countdown in timer script


foxclone
 Share

Go to solution Solved by foxclone,

Recommended Posts

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.

Link to comment
Share on other sites

@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.

Link to comment
Share on other sites

  • Solution

@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.

 

Link to comment
Share on other sites

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

 

 

Link to comment
Share on other sites

@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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.