JavaScript计数器异常：加减按钮均触发递增且出现负值

问题根源 #

1. 按钮判断逻辑错误：HTML里的加减符号嵌套在<span>标签中，直接读取label.textContent会包含空白字符或转义后的特殊字符（比如−渲染后是−而非普通减号），导致所有点击都触发递增逻辑。
2. 无最小值限制：未校验计数器下限，允许数值减到负数。

修复方案 #

方案一：精准匹配按钮符号

修改JavaScript逻辑，直接读取按钮内<span>的文本内容，同时增加最小值校验：

const ctaLabels = document.querySelectorAll(".cta");
Array.from(ctaLabels).forEach(function (label) {
  label.addEventListener("click", function () {
    // 定位当前计数器的父容器
    const fieldContainer = label.closest(".field.--counter");
    const countSpan = fieldContainer.querySelector(".count");
    const inputField = fieldContainer.querySelector(".field__input");
    
    // 获取按钮内的操作符号
    const actionSymbol = label.querySelector("span").textContent;
    let currentCount = parseInt(countSpan.textContent);

    if (actionSymbol === "+") {
      currentCount += 1;
    } else if (actionSymbol === "−") {
      // 限制最小值为0，禁止负数
      if (currentCount > 0) {
        currentCount -= 1;
      }
    }

    // 更新显示和表单输入框
    countSpan.textContent = currentCount;
    inputField.value = currentCount;
  });
});

方案二：使用自定义属性（更鲁棒）

给加减按钮添加data-action属性，避免字符匹配的潜在问题：

修改HTML按钮部分：

<div class="actions">
  <label for="" class="cta" data-action="decrease">
    <span>&minus;</span>
  </label>
  <label for="" class="cta" data-action="increase">
    <span>&plus;</span>
  </label>
</div>

对应的JavaScript代码：

const ctaLabels = document.querySelectorAll(".cta");
Array.from(ctaLabels).forEach(function (label) {
  label.addEventListener("click", function () {
    const fieldContainer = label.closest(".field.--counter");
    const countSpan = fieldContainer.querySelector(".count");
    const inputField = fieldContainer.querySelector(".field__input");
    
    const action = label.dataset.action;
    let currentCount = parseInt(countSpan.textContent);

    if (action === "increase") {
      currentCount += 1;
    } else if (action === "decrease") {
      if (currentCount > 0) {
        currentCount -= 1;
      }
    }

    countSpan.textContent = currentCount;
    inputField.value = currentCount;
  });
});

关键修改点 #

• 使用closest()精准定位计数器容器，避免DOM层级变化导致的选择器错误。
• 同步更新隐藏的表单输入框，保证视觉显示和提交数据一致。
• 增加最小值校验，确保计数器不会出现负值。

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