使用addEventListener时按钮异常：点击countUp按钮显示NaN

问题根源 #

1. counter.textContent无效：document.querySelectorAll('.num')返回的是NodeList集合，没有textContent属性，直接赋值给count会得到undefined，执行count++后就变成NaN，导致所有计数器显示NaN。
2. 全局遍历更新所有计数器：点击任意countUp按钮时，会遍历所有.num元素更新数值，不符合“点击对应按钮只更新对应计数器”的需求。
3. 未处理countDown按钮逻辑：原代码仅获取了一个countDown按钮，且未绑定点击事件。

修正后的代码 #

JavaScript

// 获取所有加/减按钮
const countUpBtns = document.querySelectorAll('.countUp');
const countDownBtns = document.querySelectorAll('.countDown');

// 绑定加按钮事件
countUpBtns.forEach(btn => {
  btn.addEventListener('click', () => {
    // 找到当前按钮所在rating模块里的num元素
    const numElement = btn.closest('.rating').querySelector('.num');
    // 把当前文本转成数字，加1后更新
    let currentCount = parseInt(numElement.textContent, 10);
    numElement.textContent = currentCount + 1;
  });
});

// 绑定减按钮事件
countDownBtns.forEach(btn => {
  btn.addEventListener('click', () => {
    const numElement = btn.closest('.rating').querySelector('.num');
    let currentCount = parseInt(numElement.textContent, 10);
    // 可选：防止数值变成负数
    if (currentCount > 0) {
      numElement.textContent = currentCount - 1;
    }
  });
});

HTML（无需修改）

<div class="rating">
  <button class="countUp">+</button>
  <span class="num">0</span>
  <button class="countDown">-</button>
</div>
<div class="rating">
  <button class="countUp">+</button>
  <span class="num">0</span>
  <button class="countDown">-</button>
</div>

关键修正点 #

• 使用btn.closest('.rating')定位当前按钮所属的模块，确保只操作对应计数器。
• 每次点击时从对应.num元素获取当前数值，转成整数后再进行加减操作，避免NaN问题。
• 为所有countDown按钮绑定事件，实现减计数功能，还添加了防止负数的逻辑（可根据需求移除）。

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