JavaScript显示变量时修改变量值并触发判断弹窗的问题

你写的if (item1 == 0)判断逻辑放在全局作用域下，仅会在页面初次加载JavaScript时执行一次。页面刚加载时item1初始值为100，不满足等于0的条件；后续点击投币按钮修改item1值时，这段判断逻辑不会自动重新执行，自然无法触发弹窗。
另外你的猜测有误：item1 -= ct1确实实际修改了变量值，并非只更新页面展示，核心问题是值更新后没有触发对应的判断逻辑。

把付清判断的逻辑移动到每次投币都会调用的insert1cent函数内部，每次扣减待付金额后立刻判断是否已付清即可。

修正后完整JavaScript代码 #

var item1 = 100;
var ct1 = 1;

function showPrice1() {
    document.getElementById("display").innerHTML = item1;
}

function insert1cent() {
    // 先扣减待付金额
    item1 -= ct1;
    // 更新页面显示
    document.getElementById("display").innerHTML = item1;
    // 扣减后判断是否付清
    if (item1 == 0) {
        alert('You have paid for your item');
    }
}

原有HTML代码不需要修改，替换JS代码后，连续点击1ct按钮直到待付金额降到0时，就会正常弹出提示。

可选优化：如果后续要扩展多投找零、多商品功能，可以额外加判断避免item1被扣成负数，比如金额小于0时计算应退的零钱。

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