Javascript点击deposit按钮执行depositMoney后余额值不更新问题

错误原因 #

• 存款输入值的获取时机错误：当前代码在页面初始化阶段就读取了depositAmount输入框的值，此时输入框还没有用户输入内容，后续点击按钮时也没有重新读取最新输入值，导致累加的永远是初始空值/0
• 数据类型未转换：输入框的value属性返回值为字符串类型，直接和数字类型的balanceAmount相加会出现字符串拼接问题，需要先转换为数字类型
• DOM API拼写错误：获取cash元素的方法getElementById被误写为getElementByIJd，会触发控制台报错，阻塞后续代码运行

修复后的JS代码 #

// 变量声明
let balance = document.getElementById("balance");
let balanceAmount = 0;

// 仅存储输入框元素引用，不要提前读取value
let depositInputEl = document.getElementById("depositAmount");
let depositButton = document.getElementById("depositButton");

// 现金数额，修复API拼写错误
let cash = document.getElementById("cash")
let cashAmount = 1000;

// 初始化页面渲染
balance.innerHTML = "$" +  balanceAmount;
cash.innerHTML = "$" + cashAmount;

// 点击存款按钮触发的逻辑
function depositMoney() {
    // 点击按钮时才读取最新输入值，转换为数字类型
    const depositInput = Number(depositInputEl.value);
    // 简单合法性校验，避免非数字/负数输入
    if (isNaN(depositInput) || depositInput <= 0) {
        alert("请输入合法的存款金额");
        return;
    }
    balanceAmount += depositInput;
    balance.innerHTML = "$" +  balanceAmount;
    // 可选：存款完成后清空输入框
    depositInputEl.value = '';
}

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