如何实现旧付款输入值与新输入值的累加？收银台功能问题

问题描述 #

实现简易收银台功能时，多次输入的付款金额未实现累加计算，导致剩余余额结果错误。例如购物车总额为50美元，用户先支付35美元，系统提示剩余15美元；但用户输入15美元后，系统未将两次付款金额累加，仍显示剩余-35美元，而非预期的0。

问题根源 #

1. 变量遮蔽：全局变量totalPaid被pay函数的同名参数覆盖，函数内部实际使用的是单次传入的付款金额，而非全局累计变量。
2. 缺少累加逻辑：每次处理付款时，未将当前输入的金额累加到全局totalPaid中，导致计算始终基于单次付款金额，而非累计总额。
3. 格式错误：剩余余额显示时直接使用负数结果，且货币符号拼接错误，影响用户理解。

解决方案 #

修改后的完整代码 #

JavaScript

let currencySymbol = '$';
let totalPaid = 0; // 全局累计付款变量

document.querySelector('.pay').addEventListener('click', (e) => {
  e.preventDefault();

  // 获取输入金额并转为数字
  let amount = document.querySelector('.received').value;
  amount *= 1;
  
  // 校验输入有效性
  if (isNaN(amount) || amount <= 0) {
    alert('请输入有效的付款金额');
    return;
  }

  // 累加当前付款金额到全局变量
  totalPaid += amount;

  // 计算找零或剩余余额
  let cashReturn = pay();

  let paymentSummary = document.querySelector('.pay-summary');
  let div = document.createElement('div');

  if (cashReturn >= 0) {
    div.innerHTML = `
            <p>累计收款: ${currencySymbol}${totalPaid}</p>
            <p>找零金额: ${currencySymbol}${cashReturn}</p>
            <p>感谢您的惠顾!</p>
        `;
    // 付款完成后重置累计金额
    totalPaid = 0;
    document.querySelector('.received').value = '';
  } else {
    const remaining = Math.abs(cashReturn);
    div.innerHTML = `
            <p>本次收款: ${currencySymbol}${amount}</p>
            <p>累计收款: ${currencySymbol}${totalPaid}</p>
            <p>剩余余额: ${currencySymbol}${remaining}</p>
            <p>请补充支付剩余金额。</p>
            <hr/>
        `;
    document.querySelector('.received').value = '';
  }

  paymentSummary.append(div);
});

// 移除参数，使用全局累计变量计算
function pay() {
  const cartSum = 50; // 购物车总额
  return totalPaid - cartSum;
}

CSS

.checkout-container {
  max-width: 34em;
  padding: 2em;
  background: #efefef;
}

HTML

<div class="checkout-container">
  <h2>收银台</h2>
  <div class="checkout">
    <div class="cart-total">购物车总额: $50</div>
    <form>
      <label>输入收款金额:</label>
      <input class="received" type="text">
      <button class="pay">提交</button>
    </form>
    <h3>收款明细</h3>
    <div class="pay-summary"></div>
  </div>
</div>

关键修改说明 #

1. 移除函数参数：删除pay函数的totalPaid参数，让函数直接使用全局累计变量，避免变量遮蔽。
2. 添加累加逻辑：在调用pay函数前执行totalPaid += amount，实现多次付款金额的累加。
3. 修正显示格式：使用Math.abs(cashReturn)将负数剩余余额转为正数，配合统一的货币符号，提升可读性。
4. 输入有效性校验：新增非数字、负数输入的校验，避免无效计算。
5. 交易重置：付款完成后重置totalPaid为0，支持后续新的交易流程。
6. UI优化：新增购物车总额显示，调整文案为更贴合场景的表述。

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