input按钮交互时JS订单总价计算更新失效问题

数据老陈

2026-9-3

点餐应用总价不更新问题修复

核心问题点

重复绑定事件：每次点击复选框触发updatePrice()时，都会给document新增一个小费点击监听，触发次数越多绑定的冗余监听越多，会导致值计算异常
变量逻辑错误：先获取了id为tip的DOM元素赋值给tip变量，紧接着又将tip重置为0；且小费按钮回调是异步触发，计算总价时无法拿到回调里更新的小费值
单位不统一：菜品金额按分存储（如1000对应10美元），小费按钮的value是美元单位（3/5/10），直接累加会出现计算错误
更新触发缺失：点击小费按钮时没有触发总价重算逻辑，只有点击复选框才会执行价格计算，导致小费修改后总价不同步

修复后代码

JavaScript部分

// 全局存储已选小费金额，单位统一为分，初始值0
let selectedTipCent = 0;

// 页面加载完成后，仅绑定一次小费按钮点击事件
document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('input[type=button]').forEach(tipBtn => {
    tipBtn.addEventListener('click', (e) => {
      // 小费按钮value为美元单位，转换为分统一计算
      selectedTipCent = Number(e.target.value) * 100;
      // 更新小费展示文本
      document.getElementById('tip').textContent = `Tip: $${e.target.value}`;
      // 小费变更后重新计算全单价格
      updatePrice();
    })
  })
})

function updatePrice() {
  // 计算已选菜品总价，单位为分
  let foodTotalCent = 0;
  document.querySelectorAll("input[type=checkbox]").forEach((checkBox) => {
    if (checkBox.checked) {
      foodTotalCent += Number(checkBox.value);
    }
  });

  // 计算全单总价
  const orderTotalCent = foodTotalCent + selectedTipCent;

  // 渲染金额，统一将分转换为美元，保留两位小数
  document.getElementById("price").textContent = `Food Total: $${(foodTotalCent / 100).toFixed(2)}`;
  document.getElementById("total").textContent = `Your order total is: $${(orderTotalCent / 100).toFixed(2)}`;
}