How to create a timer that increments every second in Javascript
Hi there. For one of my beginner Javascript labs in the Flatiron School program, I have to create a timer that increments every second once the page loads.
In the DOM, the timer that increments on the live site automatically lives in an h1 node with the id counter. This is the element that holds the actual number that increments on the website.
The hint in the lab indicates we’ll have to use these three functions to create and pause the timer.
Here are the timer requirements provided in the lab:
- the timer must increment every second once the page is loaded
- a user can manually increment and decrement the counter using the plus and minus buttons
- a user can pause the counter, which disables all buttons except the pause button and switches the label on the button from “pause” to “resume”
There are other requirements to pass the lab, but for this tutorial we will focus on the timer essentials.
Getting the timer to auto-increment upon page load
The setInterval function takes in two arguments — a) the function that will execute every x number of milliseconds and b) the delay in milliseconds. (1 second = 1000 milliseconds.) I found this video tutorial about setInterval functions super helpful.
To have the timer run automatically upon page load, I’m calling the setInterval function, which invokes the startCount function that updates the increments the timer every second, as the event that runs after the DOMContentLoaded event fires (aka when the initial HTML document is completely loaded and parsed).
Next, I have to enable the pause button.
Enabling the button to pause the execution of timer
Since the pause button is provided, we need to grab the node where it lives and declare a variable equal to that value.
const pause = document.getElementById("pause");
The return value of the setInterval function is an intervalID that points to the timer we created. We can declare a variable and set it equal to the whole setInterval function in order to grab that return value.
This is all so we can pass the id of the specific timer to the clearInterval function, which will stop it from running.
I’ve moved the intervalID to the global scope to pass the id as an argument to the clearInterval function.
Adding an event listener to the pause button and passing in the clearInterval function as the click event’s callback function is enough to enable the pause button to interrupt the execution of the timer incrementation.
Disable other buttons and switch pause with resume
The first order of business is grabbing all the buttons (-, +, ❤, pause, and resume) and adding them to an array.
I gathered all the buttons into an array. Here, we have a for loop enabled that iterates over each of the buttons, examining their individual id values. If the id isn’t equal to “pause” — we want to neglect the “pause” button because we don’t want that disabled with the others — push into the newly created buttonsArray.
Separately, we have a function declared that using the setAttribute function, which takes two arguments of a name and value. If the attribute doesn’t already exist, this function will set it to the value passed in. This case, we’re setting the disabled attribute to true — adding a disabled tag to each button when paused.
Then, we are simply adding a line into the pause click event’s callback function to switch the inner text of the pause button to “resume.”
How do we make this a real resume button that clears all the disabled texts and restarts the count?
I ultimately added if condition statements to my code that refer to whether the button is in “pause” or not. If it’s not paused, meaning we need to click pause to stop the timer, we need to disable the button.
All we are doing is adding a disabled attribute. Once a button has its disabled attribute set to true it becomes inactive and not clickable. If we are clicking on a paused button, wanting the timer to resume, it simply re-ables the button.
Separately, I have added a function to replace the innertext of the pause button to toggle between “resume” and “pause” when clicked.
This might not be the most DRY solution but it’s what I came up with — with what I learned in the program so far. Hope it helps!
