Sometimes, we want to add a button click counter with JavaScript.
In this article, we’ll look at how to add a button click counter with JavaScript.
How to add a button click counter with JavaScript?
To add a button click counter with JavaScript, we can add a click handler to a button.
For instance, we write:
<button>Click me</button>
<p>Clicks: <span id="clicks">0</span></p>
to add a button and a clicks display element.
Then we write:
const button = document.querySelector('button')
const span = document.querySelector('span')
let clicks = 0;
button.onclick = () => {
clicks += 1;
span.innerHTML = clicks;
};
to select the button and the span with querySelector.
Next, we set button.onclick to a click event handler function.
In it, we increment clicks by 1.
And we set span.innerHTML to clicks.
As a result, when we click the button, we show the number of clicks.
Conclusion
To add a button click counter with JavaScript, we can add a click handler to a button.
