使用DOM实现ATM账户余额增减时，余额重置问题的技术求助

你每次点击存款按钮时，都会在depositFunction函数内重新声明let balance = 1000，导致每次计算都从初始值1000开始累加，而非基于界面上的当前余额。

以下两种方式都能解决累加/累减失效的问题，可根据需求选择：

方式一：用全局变量存储余额 #

将余额变量放在函数外部，确保每次操作都基于最新的余额值计算：

// 初始化余额为界面初始值
let balance = 1000;
// 先获取DOM元素
const checkingAccountDepositBtn = document.getElementById("checking-deposit-btn");
const checkingAccountWithdrawalBtn = document.getElementById("checking-withdraw-btn");

checkingAccountDepositBtn.addEventListener("click", depositFunction);
checkingAccountWithdrawalBtn.addEventListener("click", withdrawFunction);

function depositFunction() {
    const inputValue = parseInt(document.getElementById("myNumber").value);
    // 校验输入是否为有效正数
    if (!isNaN(inputValue) && inputValue > 0) {
        balance += inputValue;
        document.getElementById("demo").textContent = balance;
        // 操作后清空输入框
        document.getElementById("myNumber").value = 0;
    }
}

function withdrawFunction() {
    const inputValue = parseInt(document.getElementById("myNumber").value);
    const errorElement = document.getElementById("checking-error");
    // 校验输入和余额是否充足
    if (!isNaN(inputValue) && inputValue > 0) {
        if (balance >= inputValue) {
            balance -= inputValue;
            document.getElementById("demo").textContent = balance;
            errorElement.style.display = "none";
            document.getElementById("myNumber").value = 0;
        } else {
            errorElement.style.display = "block";
        }
    }
}

方式二：每次从DOM读取当前余额 #

无需额外变量，每次计算前直接从界面的余额元素中获取最新值：

const checkingAccountDepositBtn = document.getElementById("checking-deposit-btn");
const checkingAccountWithdrawalBtn = document.getElementById("checking-withdraw-btn");

checkingAccountDepositBtn.addEventListener("click", depositFunction);
checkingAccountWithdrawalBtn.addEventListener("click", withdrawFunction);

function depositFunction() {
    const inputValue = parseInt(document.getElementById("myNumber").value);
    const balanceElement = document.getElementById("demo");
    const currentBalance = parseInt(balanceElement.textContent);
    
    if (!isNaN(inputValue) && inputValue > 0 && !isNaN(currentBalance)) {
        const newBalance = currentBalance + inputValue;
        balanceElement.textContent = newBalance;
        document.getElementById("myNumber").value = 0;
    }
}

function withdrawFunction() {
    const inputValue = parseInt(document.getElementById("myNumber").value);
    const balanceElement = document.getElementById("demo");
    const errorElement = document.getElementById("checking-error");
    const currentBalance = parseInt(balanceElement.textContent);
    
    if (!isNaN(inputValue) && inputValue > 0 && !isNaN(currentBalance)) {
        if (currentBalance >= inputValue) {
            const newBalance = currentBalance - inputValue;
            balanceElement.textContent = newBalance;
            errorElement.style.display = "none";
            document.getElementById("myNumber").value = 0;
        } else {
            errorElement.style.display = "block";
        }
    }
}

• 给错误提示元素添加初始隐藏样式：#checking-error { display: none; }，避免页面加载时就显示错误信息
• 补充输入合法性校验，防止非数字、负数或0的无效操作
• 操作完成后清空输入框，提升用户操作体验

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