一种Javascript脚本算法，用于计算Html上的鼠标点击次数<button>。使用事件侦听器

Question

我有一个非常简单的html代码，只有一个按钮标记。我需要用javascript计算鼠标点击按钮的次数。以下是VScode 中Javascript代码的屏幕截图

Answer 1

下面的代码可以实现点击计数功能。

let clicks = 0;
document.querySelector('.btn').addEventListener('click', e => {
clicks++;
document.querySelector('.clicks').textContent = clicks
})

.btn {
border: none;
outline: none;
background-color: purple;
padding: 1rem 90px 1rem 2rem;
position: relative;
border-radius: 8px;
letter-spacing: 0.7px;
background-color: #5086bd;
color: #fff;
font-size: 21px;
font-family: "Lato", sans-serif;
cursor: pointer;
box-shadow: rgba(0, 9, 61, 0.2) 0px 4px 8px 0px;

}

<button class="btn"> Click me </button>
<div>
<p>You have clicked the button <span class="clicks"> 0</span> times</p>
</div>

Answer 2

为什么不这样？

let numberOfClicks = 0;
function addclick() {
numberOfClicks++;
document.getElementById('clicks').innerHTML = numberOfClicks;
}
document.getElementById("clickme").addEventListener("click", addclick);

<button id='clickme'>Click me!</button>
<p id='clicks'>0</p>

更新：使用事件侦听器的解决方案