The click counter records the number of clicks and displays it on the screen. The counter uses the JavaScript click event to increase the value of the counter. We can use it in various applications, including games (to increase the number of points or scores) and in some hacks to save time. Let’s take a look at the code for creating a simple click counter in JavaScript.
Button click counter using JavaScript
<h3><center>JavaScript Click Counter</center></h3>
<div>
<center><h3 id="counter-label">0</h3></center>
</div>
<center>
<div>
<button onclick="incrementClick()">Click Me</button>
<button onclick="resetCounter()">Reset</button>
</div>
</center>
var counterVal = 0;
function incrementClick() {
updateDisplay(++counterVal);
}
function resetCounter() {
counterVal = 0;
updateDisplay(counterVal);
}
function updateDisplay(val) {
document.getElementById("counter-label").innerHTML = val;
}
In the code, we increment the counterVal variable by 1 each time the user clicks. The steps are as follows.
- We create a counter display in HTML with the <h3> tag and assign it a counter-label identifier so that it can be updated from the javascript code using the document.getElementById() function in javascript.
- In the HTML, we also add a couple of buttons. One button with the text Click Me, which when clicked, increases the counter value by 1. Similarly, in the other button we have Reset text in the HTML, which resets the counter to 0.
- When the Click Me button is clicked we need to increase the counter value. To do that, we use the onclick event listener. And call the incrementClick() function by clicking the Click Me button.
- Inside incrementClick() we increase the global variable counterVal by 1 and call updateDisplay.
- When we press the Reset button, we call the resetCounter() function. In this function we reset the global counter value (counterVal) to 0 and call updateDisplay().
- In updateDisplay() we display the resulting value as a parameter in the <h3> tag that contains the counter value. It uses the javascript function document.getElementById() to query the HTML element with the counter-label identifier, and then updates the innerHTML attribute with the new counter value. The innerHTML attribute additionally changes the text displayed in the HTML GUI.
In the above code example, the click counter is displayed and is incremented when the button is clicked. In most cases, we can’t always apply the click counter to the button. To make it flexible, we will need to support this feature for other HTML elements such as div, li, etc. Almost all HTML elements have a click event with an onclick event handler.
Click counter in div using JavaScript
In games scenes, there is not always a button to trigger the incremental counter. Mostly it can consist of HTML elements such as div. In such cases, we can use the onclick event handler of the div tag to commit the click to increment the counter value. See the following code example.
<h3><center>JavaScript Click Counter</center></h3>
<div>
<center><h3 id="counter-label">0</h3></center>
</div>
<center>
<div>
<div onclick="incrementClick()">Click Me</div>
<button onclick="resetCounter()">Reset</button>
</div>
</center>
var counterVal = 0;
function incrementClick() {
updateDisplay(++counterVal);
}
function resetCounter() {
counterVal = 0;
updateDisplay(counterVal);
}
function updateDisplay(val) {
document.getElementById("counter-label").innerHTML = val;
}
You may notice that in this example we used a div in the <div onclick="incrementClick()">Click Me</div> with this change, incrementClick() is triggered by clicking the div instead of the button. The code will work fine with HTML tags, such as <li>, <a>, <div>, etc. Almost all HTML tags that support onclick event handlers can be linked to the onclick listener and handled similarly.
Click Counter – Unobstructed Approach
If we implement the click counter with an unobstructed approach in JavaScript, we need to remove the onclick event handler in the HTML and move it to the JavaScript code. However, the code structure looks a little different, note the following code example.
<h3><center>JavaScript Click Counter</center></h3>
<div>
<center><h3 id="counter-label">0</h3></center>
</div>
<center>
<div>
<div id="click-div">Click Me</div>
<button id="reset-button">Reset</button>
</div>
</center>
window.onload = function () {
let clickDiv = document.getElementById("click-div");
clickDiv.onclick = incrementClick;
let resetBtn = document.getElementById("reset-button");
resetBtn.onclick = resetCounter;
}
var counterVal = 0;
incrementClick = function() {
updateDisplay(++counterVal);
}
function resetCounter() {
counterVal = 0;
updateDisplay(counterVal);
}
function updateDisplay(val) {
document.getElementById("counter-label").innerHTML = val;
}Here we bind the click events to the JavaScript code. The structure is the same, except we use the onclick listener for div Click Me and the Reset button. This binding happens at runtime. And to this click listener we bind our specific functions. This way, the code looks similar and hasn’t changed much.
Remarks
The difference between the unobstructed approach is that we bind the onclick listener in the javascript code, rather than doing it in HTML. From the HTML alone, it will be hard to tell if a button or div has an onclick event handler assigned to it.
With this approach, the code looks cleaner because all onclick events are linked and handled in JavaScript. It keeps the HTML cleaner with markup because the JavaScript code does not invade the HTML.
The code won’t work if we don’t set the onclick listener in the window.onload function. The document.getElementById(“click-div”) code will return null because it cannot find the HTML element. The wondow.onload function runs when the window is loaded and the DOM is ready. Consequently, placing code inside the window.onload block ensures that the HTML element is loaded and can be queried using the JavaScript function document.getElementById().
