In this article, we are given a button, and the task is to count how many times the button is clicked using JavaScript.
Approach: The following approach will be implemented:
Using the onClick(): 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 increased by 1 and displays on the screen.
Example 1: This example shows the number of times a button is clicked.
HTML
<!DOCTYPE html><html><body style="text-align: center;"> <h1 style="color: green;"> neveropen </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:
Using addEventListener(): 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 2: 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;"> neveropen </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:
Using a Closure: A closure is a feature of JavaScript that allows inner functions to access the outer scope of a function.
Example 3: 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;"> neveropen </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:
