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

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.

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

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.