购物网站余额累计扣减功能故障求助：仅首次扣减生效

问题根源 #

• 你的代码里x = x - y只在页面加载时执行了一次，之后点击按钮只是重复显示这个已经计算好的x值，没有在每次点击时进行新的扣减操作。
• 两个按钮的点击事件都只是读取当前x的值，没有修改它，所以不管点多少次，显示的都是第一次扣减后的结果。

修正方案 #

把扣减逻辑移到每个按钮的点击事件内部，让每次点击都触发余额扣减，再更新页面显示。还可以封装重复逻辑减少冗余：

var x = 1000000;
var y = 20000;

$(document).ready(function(){
    // 封装更新余额的函数，避免重复代码
    function updateBalance() {
        $("#balance").text(x); // 用text()比html()更安全，这里不需要HTML内容
        console.log(x);
    }

    $("#button1").click(function(){
        x -= y; // 等价于x = x - y，写法更简洁
        updateBalance();
    });

    $("#button2").click(function(){
        x -= y;
        updateBalance();
    });
});

说明 #

• 每次点击按钮时，都会先执行x -= y完成余额的累计扣减，再调用updateBalance()更新页面上的余额显示和控制台日志。
• 如果两个按钮对应不同价格的商品，只需要把y换成对应的金额变量（比如y1、y2）即可。

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