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

Question

I have a very simple html code that has only one button tag. I need to count the number of mouse clicks on the button using javascript. Here is a screenshot of the Javascript code in VScode

Answer 1

Why not this?

 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>

Update: Solution with event listener

Answer 2

Well, the code below can implement count on click functionality.

 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>