银行模拟应用转账后账户余额显示NaN问题求助

问题描述 #

开发银行模拟应用时，点击转账按钮扣除账户余额，首次转账后余额显示正常，但第二次转账后innerText显示NaN而非数值。

核心问题原因 #

问题源于变量覆盖：

• 初始时amount被声明为DOM元素（金额输入框）
• 第一次点击转账按钮时，执行amount = parseInt(amount.value)，将amount从DOM元素覆盖为数值类型
• 第二次点击时，amount已是数值，不再具备.value属性，parseInt(amount.value)等价于parseInt(undefined)，结果为NaN；后续计算totalMoneyAccount - NaN最终得到NaN

修复方案 #

修正转账逻辑 #

保留amount作为输入框DOM元素的引用，每次点击时读取其值并转换，避免覆盖原变量：

// 将原let改为const，固定为DOM元素引用
const amount = document.querySelector(`input[name='amount']`);

sendMoneyBtn.addEventListener(`click`, () => {
  // 每次点击时读取输入框的值，单独存储为临时变量
  const transferAmount = parseInt(amount.value);
  // 增加输入合法性判断，避免非数值/负数/超额导致异常
  if (!isNaN(transferAmount) && transferAmount > 0 && transferAmount <= totalMoneyAccount) {
    totalMoneyAccount -= transferAmount;
    updateProfile(totalMoneyAccount);
    // 可选：转账后清空输入框
    amount.value = '';
  }
});

额外优化项 #

1. 初始总余额计算时，处理金额中的$符号，避免转换失败：

allcards.forEach((kartica) => {
  let novacNaKartici = kartica.querySelector(`.novacNaKartici`).innerText;
  // 移除$符号后再转换为数值
  novacNaKartici = parseInt(novacNaKartici.replace('$', ''));
  totalMoneyAccount += novacNaKartici;
  totalMoney.innerText = ` ${totalMoneyAccount} $`;
});

2. 优化余额显示格式，统一带上$符号：

function updateProfile(totalMoneyAccount) {
  totalMoney.innerHTML = `${totalMoneyAccount} $`;
}

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