How to add a reset feature to my JavaScript countdown timer

Other Questions JavaScript
1

I’m developing a countdown timer using JavaScript, and I have most aspects working well. However, I’m encountering difficulties with the reset feature. When a user clicks the reset button, I want all input fields to clear and the timer to stop completely. Although the pause and resume functionalities are working as expected, I can’t seem to get the reset button to function correctly. Below is the code that I’m working with:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Countdown Timer</title>
</head>
<body>

<form>
    <label>Starting Value: </label><input type="number" id="initial_value" placeholder="100"/> <label> (minimum 3 digits)</label><br><br>
    <label>Ending Value: </label><input type="number" id="final_value" placeholder="200"/> <label> (minimum 3 digits)</label><br><br>
    <label>Step Value: </label><input type="number" id="step_value" placeholder="5"/> <br><br>
    <label>Interval: </label><input type="number" id="interval_time" placeholder="2"/> <label> (in seconds)</label><br><br>
</form>
<label>Current Count: </label><span id="current_count">0</span> <br><br>
<button id="start_button" type="button" onclick="startCounting()">Start</button>
<button id="pause_button" type="button" style="display:none;" onclick="pauseCounting()">Pause</button>
<button id="resume_button" type="button" style="display:none;" onclick="resumeCounting()">Resume</button>
<button id="reset_button" type="button" name="reset">Reset</button>

<script>
    function Timer(callback, interval) {
        var timerId,
            startTime,
            remainingTime = interval;
        
        this.pause = function() {
            clearTimeout(timerId);
            remainingTime -= new Date() - startTime;
        };

        var run = function() {
            startTime = new Date();
            timerId = setTimeout(function() {
                remainingTime = interval;
                run();
                callback();
            }, remainingTime);
        };
        
        this.resume = run;
        this.resume();
    }

    function startCounting() {
        var startVal = document.getElementById("initial_value").value;
        var endVal = document.getElementById("final_value").value;
        var stepVal = document.getElementById("step_value").value;
        var intervalVal = document.getElementById("interval_time").value;
        var current_Count = startVal;
        
        if (startVal === "" || endVal === "" || stepVal === "" || intervalVal === "") {
            alert("All fields must be filled out!");
        } else {
            if (startVal < 99 || endVal < 99) {
                alert("Values need to be at least 3 digits!");
            } else {
                var diff = endVal - startVal;
                if (diff % stepVal !== 0) {
                    alert("Step size exceeds the ending value.");
                } else {
                    var timerInstance = new Timer(function() {
                        if (startVal <= endVal) {
                            if (stepVal == 1) {
                                ++current_Count;
                                if (current_Count == endVal) {
                                    timerInstance.pause();
                                    toggleButtons();
                                }
                            } else {
                                current_Count = +stepVal + +current_Count;
                                if (current_Count == endVal) {
                                    timerInstance.pause();
                                    toggleButtons();
                                }
                            }
                        }
                        document.getElementById('current_count').innerHTML = current_Count;
                    }, intervalVal * 1000);
                    
                    setupListeners(timerInstance);
                    showPauseButton();
                }
            }
        }
    }
    
    function toggleButtons() {
        document.getElementById('pause_button').style.display = 'none';
        document.getElementById('resume_button').style.display = 'none';
        document.getElementById('start_button').style.display = 'inline';
    }
    
    function setupListeners(timer) {
        document.getElementById('pause_button').addEventListener('click', function() {
            timer.pause();
        }, false);
        
        document.getElementById('resume_button').addEventListener('click', function() {
            timer.resume();
        }, false);
    }

    function pauseCounting() {
        document.getElementById('resume_button').style.display = 'inline';
        document.getElementById('pause_button').style.display = 'none';
    }

    function resumeCounting() {
        document.getElementById('resume_button').style.display = 'none';
        document.getElementById('pause_button').style.display = 'inline';
    }
    
    function showPauseButton() {
        document.getElementById('pause_button').style.display = 'inline';
        document.getElementById('start_button').style.display = 'none';
    }
</script>
</body>
</html>

Any advice on successfully implementing the reset feature would be greatly appreciated!

2

you’re missing the onclick handler for your reset button! Add onclick="resetTimer()" to the reset button HTML, then create a resetTimer function that clears all inputs with .value = "" and resets the display. also, you’ll need to store the timer globally so you can actually stop it.

3

Your timer issue is simple - you don’t have a global reference to the timer, so you can’t stop it from the reset function. Been there myself a few months back. Declare var currentTimer = null; at the top of your script, then assign your timer to it in startCounting. For reset, check if currentTimer exists and call currentTimer.pause(), clear your input fields with document.getElementById().value = "", reset current_count to 0, and fix your button states. Without keeping a reference to the timer object, you’re stuck - can’t control it from outside where you created it.

4

I ran into the same issue when building my timer. Here’s how I got the reset working: First, create a resetTimer function for your reset button’s onclick. Inside that function, clear your input fields by setting their values to empty strings. Stop the timer using a global variable that holds your timer instance - declare this at the top of your script and update it in your startCounting function. Reset the count display and put your buttons back to their original state. Then just add onclick=\"resetTimer()\" to your reset button.

5

This topic was automatically closed 6 hours after the last reply. New replies are no longer allowed.