如何用JavaScript实现存取款后更新余额及余额不足提示功能？

需求说明 #

• 存款：将存入金额添加至账户，输出成功提示及更新后的余额
• 取款：
  • 账户余额≥取款金额时，执行取款并输出成功提示及新余额
  • 余额不足时，显示**"Insufficient Funds"**提示，不执行取款操作
• 无论交易成功与否，均需显示当前账户余额

原代码问题分析 #

1. 未更新核心余额变量intamount，导致后续交易始终使用初始值计算
2. 取款逻辑中withdrawmoney的计算冗余且错误，无需通过addmoney间接推导
3. 余额不足时的提示文字不符合要求，未使用指定的英文提示
4. 缺少输入合法性校验，无法处理非数字、负数等无效输入

修正后的完整代码 #

<html>
<head>
<title>ITE154 Bank of Garden City</title>

<style type="text/css">
body {
    background-image: url("https://newton.ncc.edu/gansonj/ite154/img/bank-bkg.jpg");
    font-family: arial;
    text-align: right;
    color: #008B8B;
}

#pagewrap {
    border: 8px #EEB76B solid;
    padding: 10px;
    width: 800px;
    min-height: 600px;
    border-radius: 25px;
    text-align: center;
    background: #212121;
    margin: 40px auto 0px auto; 
}

#title {
    font-size: 2.2em;
    border-bottom: 7px #EEB76B double;
    padding: 10px 0px 10px 0px;
    color: #EEB76B;
    text-align: center;
}

.formtext {
    text-align: center;
    font-size: 1.5em;
    margin-top: 20px;
}

.bank-action {
    border: 3px #EEB76B solid;
    background-color: #310B0B;
    padding: 10px;
    border-radius: 25px;
    width: 100px;
    color: #EEB76B;
    font-size: 1.15em;
}

.bank-action:hover {
    border: 3px #000000 solid;
    background-color: #EEB76B;
    color: #351F39;
}

#output {
    height: 150px;
    width: 500px;
    padding-top: 20px;
    background-color: white;
    margin: 0px auto 30px auto;
    border: 8px #EEB76B solid;
    font-size: 1.5em;
}
.spacer {
    margin-bottom: 15px;
}

#amount {
    font-size: 1.15em;
    padding: 10px;
    border: 5px #EEB76B solid;
}
</style>

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>

<script type="text/javascript">
$(document).ready(function(){
    var intamount = 500;
    // 初始化显示余额
    updateBalanceDisplay();

    $(".bank-action").on("click", function(){
        var amount = parseFloat($("#amount").val());
        var msg = "";
        var action = $(this).attr("id");

        // 处理无效输入
        if (isNaN(amount) || amount <= 0) {
            msg += "<div>请输入有效的正数金额</div>";
            msg += "<div>当前账户余额: $" + intamount + "</div>";
            $("#output").html(msg);
            return;
        }

        if (action === "deposit") {
            intamount += amount;
            msg += "<div>您的 $" + amount + " 存款已成功</div>";
            msg += "<div>当前账户余额: $" + intamount + "</div>";
        } else {
            if (amount > intamount) {
                msg += "<div>Insufficient Funds</div>";
                msg += "<div>当前账户余额: $" + intamount + "</div>";
            } else {
                intamount -= amount;
                msg += "<div>您的 $" + amount + " 取款已成功</div>";
                msg += "<div>当前账户余额: $" + intamount + "</div>";
            }
        }

        $("#output").html(msg);
        // 清空输入框
        $("#amount").val("");
    });

    // 封装余额显示逻辑
    function updateBalanceDisplay() {
        $("#output").html("当前账户余额: $" + intamount);
    }
});
</script> 
</head>
<body>
<div id="pagewrap">
    <div id="title">ITE154 Bank of Garden City</div>
    <div id="formwrap" style="margin-top: 30px;">
        <form>
            <div class="spacer formtext">
                输入交易金额
            </div>
            <div class="spacer">
                <input type="text" id="amount">
            </div>
            <div>
                <input type="button" class="bank-action" id="deposit" value="Deposit">
                <input type="button" class="bank-action" id="withdraw" value="Withdraw">
            </div>
            <div class="spacer formtext">
                当前账户余额
            </div>
            <div id="output"></div>
        </form>
    </div> <!-- ends div#formwrap -->
</div> <!-- ends div#pagewrap -->
</body>
</html>

关键修改点 #

1. 更新核心余额变量：存款/取款成功时直接修改intamount，确保后续交易基于最新余额计算
2. 简化取款逻辑：移除冗余的中间变量，直接使用intamount进行加减运算
3. 替换提示文字：余额不足时显示要求的**"Insufficient Funds"**
4. 添加输入校验：拦截非数字、负数等无效输入，给出明确提示
5. 封装显示逻辑：用updateBalanceDisplay函数统一处理余额初始化
6. 优化用户体验：交易完成后自动清空输入框

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