JavaScript购物车数值无法增减问题求助（新手开发者）

你的代码里有几个关键问题导致加减按钮点击无反应，下面逐一说明并给出修正方案：

1. JavaScript中ID拼接的换行错误 #

在updateProductNumber函数里，获取元素ID的代码存在换行：

const productNumber = document.getElementById(product + '- 
    number');

换行和多余空格会让拼接后的ID变成phone- number，和HTML里的phone-number完全不匹配，自然找不到目标元素，函数直接执行失败。

2. HTML中input的重复value属性 #

你的input标签写了两个value属性：

<input type="number" id="phone-number" value="0" class="form-control text-center" value="1">

浏览器只会识别第一个value值，这会导致初始数量不符合预期，虽不是按钮无反应的直接原因，但也需要修正。

3. DOM加载顺序问题 #

如果你的JavaScript代码放在HTML头部，会出现DOM还没加载完成就执行事件绑定的情况，此时找不到按钮元素，绑定直接失败。

修正后的完整代码 #

HTML部分 #

<div class="input-group number-spinner"> 
  <button id="phone-minus" class="btn-default">
    <i class="fa-solid fa-minus"></i>
  </button>
  <input type="number" id="phone-number" value="1" class="form-control text-center">
  <button id="phone-plus" class="btn btn-default">
    <i class="fas fa-plus"></i>
  </button> 
</div>
<!-- 对应case的组件，确保ID匹配 -->
<div class="input-group number-spinner"> 
  <button id="case-minus" class="btn-default">
    <i class="fa-solid fa-minus"></i>
  </button>
  <input type="number" id="case-number" value="1" class="form-control text-center">
  <button id="case-plus" class="btn btn-default">
    <i class="fas fa-plus"></i>
  </button> 
</div>

<!-- 总价显示区域，确保这些ID存在 -->
<div>
  <p>小计: <span id="sub-total"></span></p>
  <p>税费: <span id="tax-amount"></span></p>
  <p>总计: <span id="total-price"></span></p>
</div>

JavaScript部分 #

// 等待DOM完全加载后再执行代码
document.addEventListener('DOMContentLoaded', function() {
  function updateProductNumber(product, price, isIncreasing) {
    // 修正ID拼接的换行问题
    const productNumber = document.getElementById(product + '-number');
    let productValue = parseInt(productNumber.value);
    if (isIncreasing) {
      productValue = productValue + 1;
    } else if (productValue > 0) {
      productValue = productValue - 1;
    }
    productNumber.value = productValue;

    // 更新单个商品总价，增加判断避免元素不存在报错
    const productTotal = document.getElementById(product + '-total');
    if (productTotal) {
      productTotal.innerText = productValue * price;
    }
    calculateTotal();
  }

  function getElementValue(product) {
    const productInput = document.getElementById(product + '-number');
    const productValue = parseInt(productInput.value);
    return productValue;
  }

  function calculateTotal() {
    const phoneTotal = getElementValue('phone') * 1219;
    const caseTotal = getElementValue('case') * 59;
    const subTotal = phoneTotal + caseTotal;
    const tax = subTotal / 10;
    const totalPrice = subTotal + tax;

    // 更新总价元素，增加判断避免报错
    const subTotalEl = document.getElementById('sub-total');
    const taxEl = document.getElementById('tax-amount');
    const totalEl = document.getElementById('total-price');
    if (subTotalEl) subTotalEl.innerHTML = subTotal;
    if (taxEl) taxEl.innerHTML = tax;
    if (totalEl) totalEl.innerHTML = totalPrice;
  }

  // 绑定按钮点击事件
  document.getElementById('case-plus').addEventListener('click', function() {
    updateProductNumber('case', 59, true);
  });
  document.getElementById('case-minus').addEventListener('click', function() {
    updateProductNumber('case', 59, false);
  });
  document.getElementById('phone-plus').addEventListener('click', function() {
    updateProductNumber('phone', 1219, true);
  });
  document.getElementById('phone-minus').addEventListener('click', function() {
    updateProductNumber('phone', 1219, false);
  });

  // 页面加载时初始化总价
  calculateTotal();
});

额外注意事项 #

• 确保引入了Font Awesome图标库，否则图标无法显示，但不影响按钮功能。
• 所有用到的元素ID（比如case-total、sub-total等）都要在HTML中存在，否则会报错中断代码执行。
• 遇到问题可以打开浏览器控制台（按F12）查看报错信息，这是前端排查问题的核心手段。

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