JavaScript：编码挑战：计算按钮点击次数

最新推荐文章于 2024-04-16 16:10:54 发布

原创最新推荐文章于 2024-04-16 16:10:54 发布 · 3.9k 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #p2p

javascript 专栏收录该内容

56 篇文章

订阅专栏

这篇博客介绍了如何用JavaScript为HTML页面上的按钮添加点击计数功能。当用户点击'id'为'myButton'的按钮时，点击次数会递增并在'span'元素中显示。同时，通过点击'deactivate'按钮可以停止计数。两种不同的解决方案被提出，一种是博主的方法，另一种是官方提供的答案，两者都实现了相同的功能。

问题描述

根据下面的 HTML 代码编写 JavaScript 代码，实现按 myButton 点击次数加1，通过更新 clickCount 的数值来显示点击次数，按 deactivate 按钮停止计数。

HTML 代码：

<html>
 <head>
 </head>
 <body>
	<button id="myButton">Click me!</button>
	<p>You clicked on the button <span id="clickCount">0</span> times</p>
	<button id="deactivate">Deactivate counting</button> </body>
</html>

页面显示效果：

解决方法

我的方法：

// Write-Your-Code-Here
const buttonElement=document.getElementById("myButton");
let times=0;
const addTimes=()=>
{
    times+=1;   
    document.getElementById("clickCount").textContent=times;
}
buttonElement.addEventListener("click",addTimes);
document.getElementById("deactivate").addEventListener("click",e=>{
    buttonElement.removeEventListener("click",addTimes);
});

官方的答案：

const click = () => {
  const clickCountElement = document.getElementById("clickCount");
  const clickCount = Number(clickCountElement.textContent);
  clickCountElement.textContent = clickCount + 1;
};

document.getElementById("myButton").addEventListener("click", click);

document.getElementById("deactivate").addEventListener("click", () => {
  document.getElementById("myButton").removeEventListener("click", click);
});