实现多输入框数量联动：手动修改与按钮增减的实时总价计算

核心思路 #

把总价计算逻辑封装成独立函数，让按钮点击和keyup事件共用这个函数，确保所有操作都能同步更新总价，避免代码冗余。

实现步骤 #

1. 封装计算总价的通用函数 #

这个函数负责遍历所有商品数量输入框，根据对应单价计算总和：

function calculateTotal() {
  let total = 0;
  // 假设每个商品项有共同的类".item"，内部包含数量输入框和单价元素
  document.querySelectorAll('.item').forEach(item => {
    // 获取数量值，非数字则设为0
    const quantity = parseInt(item.querySelector('.quantity-input').value) || 0;
    // 通过data属性获取对应单价
    const price = parseFloat(item.querySelector('.price').dataset.price) || 0;
    total += quantity * price;
  });
  // 更新总价显示，保留两位小数
  document.getElementById('total-amount').textContent = `¥${total.toFixed(2)}`;
}

2. 保留原有增减按钮的事件绑定 #

给加减按钮绑定点击事件，修改数量后直接调用计算函数：

// 减号按钮逻辑
document.querySelectorAll('.decrease-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    const input = btn.nextElementSibling;
    let currentVal = parseInt(input.value) || 0;
    input.value = currentVal > 0 ? currentVal - 1 : 0;
    calculateTotal();
  });
});

// 加号按钮逻辑
document.querySelectorAll('.increase-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    const input = btn.previousElementSibling;
    let currentVal = parseInt(input.value) || 0;
    input.value = currentVal + 1;
    calculateTotal();
  });
});

3. 给数量输入框绑定keyup事件 #

监听输入框的keyup事件，实时触发计算，同时过滤非数字输入避免无效值：

document.querySelectorAll('.quantity-input').forEach(input => {
  input.addEventListener('keyup', () => {
    // 过滤非数字字符，只保留数字
    input.value = input.value.replace(/\D/g, '');
    // 实时更新总价
    calculateTotal();
  });

  // 补充blur事件，确保输入框失焦时修正无效值
  input.addEventListener('blur', () => {
    input.value = parseInt(input.value) || 0;
    calculateTotal();
  });
});

4. 页面初始化计算总价 #

确保页面加载完成后，默认显示正确的初始总价：

document.addEventListener('DOMContentLoaded', calculateTotal);

对应HTML结构示例 #

<div class="item">
  <button class="decrease-btn">-</button>
  <input type="text" class="quantity-input" value="0">
  <button class="increase-btn">+</button>
  <span class="price" data-price="19.9">¥19.9</span>
</div>

<div class="item">
  <button class="decrease-btn">-</button>
  <input type="text" class="quantity-input" value="0">
  <button class="increase-btn">+</button>
  <span class="price" data-price="29.9">¥29.9</span>
</div>

<div>总价：<span id="total-amount">¥0.00</span></div>

关键注意事项 #

• 所有操作复用同一个calculateTotal()函数，确保逻辑统一，避免不同步问题
• 处理非数字输入，防止NaN导致总价计算错误
• 用blur事件作为补充，避免用户输入无效内容后离开输入框时总价显示异常

内容的提问来源于stack exchange，提问作者Matúš Marčiš