How to count the number of times a button is clicked using JavaScript ?
Last Updated :
15 Dec, 2023
At times, it becomes necessary to monitor the number of times a user clicks a button. In this article, we are going to learn how to count the number of times a button is clicked using JavaScript
Below are the approaches to count the number of times a button is clicked using JavaScript
First, we will create an HTML button and a paragraph element where we display the button click count. When the button is clicked, the JavaScript function is called. We declare a count variable and initialize it to 0. When the user clicks the button, the count value increases by 1 and displays on the screen.
Example: This example shows the number of times a button is clicked.
HTML
<!DOCTYPE html>
< html >
< body style = "text-align: center;" >
< h1 style = "color: green;" >
GeeksforGeeks
</ h1 >
< h4 >
How to count the number of
times a button is clicked?
</ h4 >
< button id = "btn" >Click Here!</ button >
< p >
Button Clicked < span id = "display" >0</ span > Times
</ p >
< script type = "text/javascript" >
let count = 0;
let btn = document.getElementById("btn");
let disp = document.getElementById("display");
btn.onclick = function () {
count++;
disp.innerHTML = count;
}
</ script >
</ body >
</ html >
|
Output:
The addEventListener() is an inbuilt function in JavaScript which takes the event to listen for, and a second argument to be called whenever the described event gets fired.
Example: In this example, we will see the use of addEventListener() for tracking a button click:
HTML
<!DOCTYPE html>
< html >
< body style = "text-align: center;" >
< h1 style = "color: green;" >
GeeksforGeeks
</ h1 >
< h4 >
How to count the number of
times a button is clicked?
</ h4 >
< button id = "btn" >Click Here!</ button >
< p >
Button Clicked < span id = "display" >0</ span > Times
</ p >
< script type = "text/javascript" >
let count = 0;
let btn = document.getElementById("btn");
let disp = document.getElementById("display");
btn.addEventListener("click", function () {
count++;
disp.innerHTML = count;
});
</ script >
</ body >
</ html >
|
Output:
A closure is a feature of JavaScript that allows inner functions to access the outer scope of a function.Â
Example: In this example, we will see the use of closure for tracking the button count.
HTML
<!DOCTYPE html>
< html >
< body style = "text-align: center;" >
< h1 style = "color: green;" >
GeeksforGeeks
</ h1 >
< h4 >
How to count the number of
times a button is clicked?
</ h4 >
< button id = "btn" >Click Here!</ button >
< p >
Button Clicked < span id = "display" >0</ span > Times
</ p >
< script >
function createCounter() {
let count = 0;
return function () {
count++;
return count;
}
}
const counter = createCounter();
const button = document.getElementById("btn");
const disp = document.getElementById("display");
button.addEventListener("click", () => {
disp.innerHTML = counter();
});
</ script >
</ body >
</ html >
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...