如何实现带加减按钮的数量输入框并根据数量计算总价？

你的代码存在三个核心问题导致总价无法自动更新：

1. 点击加减按钮修改输入框值时，不会触发change事件，因此总价逻辑不会执行
2. 单价直接从总价元素的文本中获取，计算一次后单价会被总价覆盖，后续计算完全错误
3. 计算结果未做货币格式化，无法保证两位小数的规范显示

以下是修复后的完整代码：

HTML 部分 #

<div class="counter">
  <span class="down" onClick='decreaseCount(event, this)'>-</span>
  <input type="text" id="quantity" value="1" name="quantity">
  <span class="up" onClick='increaseCount(event, this)'>+</span>
</div>

Price: £<span id="price" data-unit-price="2.00">2.00</span>

• 调整了总价元素的结构，将单价存储在data-unit-price属性中，避免和总价文本混淆
• 初始总价直接显示2.00，符合初始数量1的计算结果

JavaScript 部分 #

// 统一处理总价计算的函数
function updateTotal() {
  const quantity = parseInt(document.getElementById('quantity').value, 10) || 1;
  const unitPrice = parseFloat(document.getElementById('price').dataset.unitPrice);
  // 计算后保留两位小数，符合货币格式
  const total = (quantity * unitPrice).toFixed(2);
  document.getElementById('price').textContent = total;
}

function increaseCount(a, b) {
  var input = b.previousElementSibling;
  var value = parseInt(input.value, 10);
  value = isNaN(value) ? 0 : value;
  value++;
  input.value = value;
  // 点击加按钮后立即更新总价
  updateTotal();
}

function decreaseCount(a, b) {
  var input = b.nextElementSibling;
  var value = parseInt(input.value, 10);
  if (value > 1) {
    value = isNaN(value) ? 0 : value;
    value--;
    input.value = value;
    // 点击减按钮后立即更新总价
    updateTotal();
  }
}

// 监听输入框的手动修改（输入、粘贴、失去焦点等场景）
$('#quantity').on('input change', function () {
  // 校验数量，确保不小于1
  let value = parseInt($(this).val(), 10);
  if (isNaN(value) || value < 1) {
    value = 1;
    $(this).val(value);
  }
  updateTotal();
});

• 新增updateTotal函数，把总价计算逻辑抽离出来，避免重复代码
• 在加减按钮的函数中调用updateTotal，确保点击按钮时总价实时更新
• 监听输入框的input和change事件，覆盖所有修改数量的场景
• 对输入框的值做校验，防止出现小于1的无效数量
• 使用toFixed(2)保证总价始终显示两位小数

CSS 部分（无需修改） #

.counter {
    width: 150px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.counter input {
  background:none;
  margin:0px 12px;
  width:80px;
  border:1px solid #0052cc;
  line-height:34px;
  font-size:20px;
  text-align:center;
  color:var(--text-color);
  appearance:none;
  outline:0;
}
.counter span {
    background:#0052cc;
    display: block;
    font-size: 25px;
    padding:0 10px;
    cursor: pointer;
    color:#111;
    user-select: none;
}

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