JavaScript数量增减功能点击事件仅触发一次是什么原因？

问题根因 #

代码的执行顺序存在逻辑错误，三个if判断会按书写顺序依次执行：
点击.fa-plus-square或.fa-minus-square元素时，这两个元素都不包含quantity-input类，因此第一个if判断会先执行，强制把input.value重置为1，之后才会执行对应加减的if逻辑，给已经被重置为1的值做+1或者-1操作。所以你每次点击加减都会得到固定的2或者0，看起来就像只能生效一次。

修复方案 #

方案1：保留点击非输入区域重置的需求，修正判断条件 #

如果需要保留「点击页面其他区域将数值重置为1」的逻辑，只需要调整第一个if的判断条件，排除加减按钮即可：

let input = document.querySelector(".quantity-input");
document.addEventListener('click', function(e) {
  const target = e.target;
  // 仅点击输入框、加号、减号以外的区域时，才重置数值为1
  if (!target.classList.contains('quantity-input') && !target.classList.contains('fa-plus-square') && !target.classList.contains('fa-minus-square')) {
    input.value = 1;
  }
  if (target.classList.contains('fa-plus-square')) {
    input.value = parseInt(input.value) + 1;
  }
  if (target.classList.contains('fa-minus-square')) {
    // 可选添加最小值判断，避免数值减为负数
    const val = parseInt(input.value);
    input.value = val > 1 ? val - 1 : 1;
  }
});

方案2：不需要重置逻辑，直接删除第一个if #

如果没有点击其他区域重置数值的需求，直接删掉第一个if块即可解决问题：

let input = document.querySelector(".quantity-input");
document.addEventListener('click', function(e) {
  if (e.target.classList.contains('fa-plus-square')) {
    input.value = parseInt(input.value) + 1;
  }
  if (e.target.classList.contains('fa-minus-square')) {
    const val = parseInt(input.value);
    input.value = val > 1 ? val - 1 : 1;
  }
});

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