如何统计指定单个按钮的点击次数？多按钮计数逻辑需修正

别担心，我来帮你搞定这个问题～核心问题应该是你现在给所有8个按钮都绑定了点击计数的逻辑，所以点任何按钮都会触发次数更新。咱们只需要把计数逻辑仅绑定到你指定的那个按钮就行，步骤很简单：

第一步：给目标按钮添加唯一标识 #

先在HTML里给你要统计的那个按钮加上一个独特的id或者class，用id会更直接：

<!-- 这是你要统计的指定按钮 -->
<button id="targetButton">我是要统计的按钮</button>

<!-- 其他7个普通按钮 -->
<button>普通按钮1</button>
<button>普通按钮2</button>
<!-- ... 剩下的按钮 -->

<!-- 显示次数的p元素 -->
<p id="clickCount">点击次数：0</p>

第二步：仅给目标按钮绑定点击事件 #

然后在JavaScript里，精准获取这个带唯一标识的按钮，只给它加点击监听，其他按钮完全不影响：

// 初始化计数变量
let clickCount = 0;
// 获取目标按钮和显示次数的元素
const targetBtn = document.getElementById('targetButton');
const countDisplay = document.getElementById('clickCount');

// 只给指定按钮绑定点击事件
targetBtn.addEventListener('click', () => {
  clickCount++;
  countDisplay.textContent = `点击次数：${clickCount}`;
});

为什么之前会触发所有按钮？ #

大概率你之前的代码是用document.querySelectorAll('button')获取了所有按钮，然后循环给每个按钮都加了点击监听，所以点任何按钮都会让计数增加。现在咱们精准定位到指定按钮，就只会统计它的点击啦～

如果你的按钮已经有其他专属标识（比如特定的class），也可以用document.querySelector('.your-special-class')来获取，原理是完全一样的。

内容的提问来源于stack exchange，提问作者Ana Kitanovska