如何使用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">
        var count = 0;
        var btn = document.getElementById("btn");
        var 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">
        var count = 0;
        var btn = document.getElementById("btn");
        var disp = document.getElementById("display");

        btn.addEventListener("click", function () {
            count++;
            disp.innerHTML = count;
        });

    </script>
</body>

</html>

输出：

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

使用闭包： 闭包是JavaScript的一项特性，它允许内部函数访问外部函数的作用域。

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

<!DOCTYPE html>
<html>
  
<body style="text-align: center;">
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
  
    <h4>
        如何计算按钮被点击的次数？
    </h4>
  
    <button id="btn">点击这里！</button>
  
    <p>
        按钮已被点击 <span id="display">0</span> 次
    </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计算按钮被点击的次数