JavaScript实现按钮选中/取消选中时动态增减计数的问题排查

嘿，我瞅了下你的代码，问题出在事件处理函数里的逻辑判断上——你写了个完全矛盾的嵌套判断，导致取消选中时的计数减少逻辑根本不会执行！

问题所在 #

你看这段代码里的逻辑矛盾点：

if (this.classList.contains("active")) {
  if (!this.classList.contains("active")) { // 这里永远不会成立！
    count--;
    disp.innerHTML = count;
  }
  count++;
  disp.innerHTML = count;
}

在已经确认按钮带有active类的外层判断里，又嵌套了一个判断它没有active类的分支，这显然不可能触发。而当你点击按钮取消选中（toggle移除active类）时，外层的if分支直接跳过，自然不会执行count--的逻辑。

修正后的代码 #

我们调整逻辑顺序：先执行类的切换，再根据按钮当前的最终状态来增减计数，这样逻辑就通顺了：

var buttons = document.getElementsByClassName("button");
var count = 0;
var disp = document.getElementById("display");

for (let i = 0, l = buttons.length; i < l; i++) {
  buttons[i].addEventListener('click', function() {
    // 先完成active类的切换
    this.classList.toggle('active');
    
    // 根据当前状态更新计数
    if (this.classList.contains("active")) {
      count++;
    } else {
      count--;
    }
    
    // 更新显示内容
    disp.innerHTML = count;
  })
}

更简洁的写法（可选） #

如果你喜欢更精炼的代码，可以用三元表达式替代if-else，一行搞定计数更新：

var buttons = document.getElementsByClassName("button");
var count = 0;
var disp = document.getElementById("display");

for (let i = 0, l = buttons.length; i < l; i++) {
  buttons[i].addEventListener('click', function() {
    this.classList.toggle('active');
    // 三元表达式一键判断并更新计数
    count += this.classList.contains("active") ? 1 : -1;
    disp.innerHTML = count;
  })
}

这样修改后，点击按钮切换选中状态时，计数器就会对应增减了，你的CSS和HTML部分不需要改动，直接沿用原来的即可～

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