JavaScript 如何计算按钮被点击的次数

在这篇文章中，我们有一个按钮，任务是使用JavaScript计算按钮被点击的次数。

方法: 将会实现以下方法：

使用 onClick() ：首先，我们会创建一个HTML按钮和一个段落元素，在其中显示按钮点击计数。当按钮被点击时，JavaScript函数被调用。我们声明一个计数变量并将其初始化为0。当用户点击按钮时，计数值增加1并显示在屏幕上。

示例1: 这个示例展示了按钮被点击的次数。

<!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>

输出：

JavaScript 如何计算按钮被点击的次数

使用 addEventListener()： addEventListener() 是 JavaScript 中内置的函数，它接收要监听的事件以及一个在描述的事件被触发时将被调用的第二个参数。

示例 2： 在这个示例中，我们将看到使用 addEventListener() 来跟踪按钮的点击：

<!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>

输出：

JavaScript 如何计算按钮被点击的次数

示例3： 在这个示例中，我们将看到使用闭包来跟踪按钮计数。

<!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>

输出：

JavaScript 如何计算按钮被点击的次数