JavaScript中TotalPrice值更新后如何重新触发if else判断

你的if/else判断只在页面首次加载时执行了一次，后续TotalPrice变动时，这段判断逻辑没有被再次调用，自然不会更新提示。
你想的监听<span>内容变化的方案属于绕路实现，完全没必要：价格本来就是在quantityDown/quantityUp的点击回调里修改的，直接在价格更新后同步执行判断逻辑即可，实现更简单、性能更好、后续维护也不容易出问题。
另外注意不要用document.write输出提示：页面加载完成后再调用document.write会清空整个页面的现有内容，很容易引发故障。

第一步：调整HTML结构 #

提前在页面里预留好显示价格提示的固定容器，不要靠动态写入生成：

<!-- 价格提示容器 -->
<div id="priceTip"></div>

<!-- 你原有的加减按钮和价格显示元素 -->
<div id="quantityDown_0_0" class="quantity-down" mindx="0_0" vindex="0" onclick="quantityDown(this)"></div>
<div id="quantityUp_0_0" class="quantity-up" mindx="0_0" vindex="0" onclick="quantityUp(this)"></div>
<span class="money">£0</span>

第二步：修改JS逻辑 #

把价格判断、提示更新的逻辑封装成可重复调用的函数，每次价格变动后调用一次即可：

// 全局总价变量
var TotalPrice = 0;
// 提前获取需要操作的DOM元素，不用每次更新都重新查DOM
const priceTipEl = document.getElementById('priceTip');
const moneyEl = document.querySelector('.money');

/**
 * 更新价格状态提示
 */
function refreshPriceStatus() {
  if (TotalPrice === 0) {
    priceTipEl.textContent = 'PRICE IS 0';
  } else {
    priceTipEl.textContent = 'PRICE IS NOT 0';
  }
}

// 页面初始加载时执行一次，显示初始状态提示
refreshPriceStatus();

// 数量减少按钮逻辑
function quantityDown(btn) {
  // --- 这里保留你原有的数量、总价计算逻辑 ---
  // 比如计算完成后TotalPrice变成新的值

  // 更新价格显示
  moneyEl.textContent = `£${TotalPrice}`;
  // 同步更新状态提示
  refreshPriceStatus();
}

// 数量增加按钮逻辑
function quantityUp(btn) {
  // --- 这里保留你原有的数量、总价计算逻辑 ---
  // 比如计算完成后TotalPrice变成新的值

  // 更新价格显示
  moneyEl.textContent = `£${TotalPrice}`;
  // 同步更新状态提示
  refreshPriceStatus();
}

• 不推荐用DOM内容监听方案的原因：
  • 额外增加性能开销，浏览器需要持续监测目标元素的内容变动
  • 逻辑链路冗余：价格是你自己写代码修改的，没必要等DOM更新了再反过来触发判断，平白多绕一层
  • 容易出兼容问题：旧浏览器对元素内容变动的监听API支持不一致，后续如果给价格加格式化（比如千分位、货币符号前后加空格）还可能误触发判断
• 做等于判断时优先用===而不是==，前者不会做隐式类型转换，只要你保证TotalPrice始终存数字类型的值，判断会更严谨，不容易出奇怪的类型bug。

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