Ways to make an HTML Javascript counter
Making an HTML counter using Javascript is like the very first task in every web developing 101 courses. Today I want to document every way I can think of to make it.
First, let’s make a plain HTML and CSS counter with plus and minus buttons.
Now add function to Plus and Minus buttons
The most straightforward way I can think of is to implement the function as:
When clicking the control button, read the number in the div with id ‘display’ and update the ‘innterText’ of the display
In the code above, I used inline javascript inside HTML, add the `onclick` handler directly to the buttons.
This works perfectly fine as a simple page like this, and you don’t need to worry about using javascript to attach functions to a button. As a new developer to be, I’m sure managing HTML alone takes time already.
But most likely as we learn more about javascript, we would want to move javascript to its own file. Let’s do that.
Move script to .js file and add event listener there too.
With the javascript in a separate file, I used 2 different APIs to attach the function to the button clickevent. I’m sure at this stage you probably still a bit confused about what is event.
Basically, an event is like an interface on an HTML element. We define when it triggers, what type of event gets triggered, and how do we handle it.
Since button click is like the most common action of component interaction. Javascript provided a separate API for it. In the code above, I used the.onclick to attach the plus button. The function assigned to it gets to run when the plus button onclick.
For the minus button, I used the more generic API addEventListener, in my opinion, this is not as straightforward as the onclick, but it’s more generic.
More about event
All the code above attach the logic directly on to the buttons and modify the display text in those function. What if I want to make the elements more Reactive, for instance, I want the display element
<div id='display'>0</div>to listen to the event numberUpdated and update itself.
Also, make the buttons to emit the event numberUpdated when they perform the plus and minus logic.
In the code above, we read the number inside the display first and store it in let number, and whenever a button clicked, we mutate the number to the updated number and trigger the event. The display will listen to the event and update itself with the updated number.
Now let’s try another way to trigger the event. How about we trigger the event to include the updated number, in this case, we don’t need to keep mutate the number stored in the variable.
Instead of trigger Event here we tried to use a new type of event, CustomEvent which you can include a second parameter { detail: <things you want to include> } , please note you have to include your content in the detail object.
Above are some ways I can think of to implement this good old counter, let me know if you have other ideas or any questions.
