能否在if语句中直接访问类？JavaScript计数器功能异常求助

一、异常原因与修复 #

你的计数器程序异常的核心原因是逻辑判断错误：原来的代码中，if (decreaseEl)只是检查页面中是否存在.decrease-el元素，而非判断当前点击的按钮是否是该元素。只要页面里有这个按钮，所有按钮点击都会触发count--，自然只会出现递减效果。

修复后的JavaScript代码 #

let count = 0;
let counter = document.querySelector("#number-el");
let btns = document.querySelectorAll(".btn");

btns.forEach(function(btn) {
  btn.addEventListener("click", function() {
    // 通过this判断当前点击按钮的类（无需event对象）
    if (this.classList.contains("decrease-el")) {
      count--;
    } else if (this.classList.contains("increase-el")) {
      count++;
    } else {
      count = 0;
    }

    // 更新数字颜色与内容
    if (count < 0) {
      counter.style.color = "green";
    } else if (count > 0) {
      counter.style.color = "red";
    } else {
      counter.style.color = "yellow";
    }
    counter.textContent = count;
  });
});

HTML代码无需修改，保持原结构即可。

二、关于“不借助event对象访问类”的问题 #

可以实现，无需依赖event对象，有两种常用方式：

方式1：利用事件处理函数中的this关键字 #

事件处理函数里的this指向当前被点击的按钮元素，通过this.classList.contains('类名')就能判断当前按钮的类，如上面的修复代码所示，完全不需要event对象。

方式2：给每个按钮单独绑定事件 #

直接为每个按钮绑定专属的点击事件，无需判断类，逻辑更直观：

let count = 0;
let counter = document.querySelector("#number-el");

// 递增按钮
document.querySelector(".increase-el").addEventListener("click", function() {
  count++;
  updateCounter();
});

// 递减按钮
document.querySelector(".decrease-el").addEventListener("click", function() {
  count--;
  updateCounter();
});

// 重置按钮
document.querySelector(".reset-el").addEventListener("click", function() {
  count = 0;
  updateCounter();
});

// 抽离通用更新逻辑
function updateCounter() {
  counter.style.color = count < 0 ? "green" : count > 0 ? "red" : "yellow";
  counter.textContent = count;
}

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