span元素文本变化时JS alert()不触发的解决方法

你的判断逻辑仅在页面初始加载阶段执行了单次，没有绑定任何针对.dystans元素内容变化的监听机制，后续元素文本被动态修改时，没有触发点让判断逻辑重新运行，自然不会弹出alert。

使用MutationObserver监听目标元素的内容变化，每次文本更新时自动重新执行判断逻辑即可，不需要改动原有修改span内容的业务代码，适配所有动态改值的场景（包括第三方插件改值的情况）。

完整实现代码如下：

JavaScript 代码 #

// 把距离判断逻辑封装为可重复调用的函数
function checkDistance() {
  const distanceEl = document.getElementsByClassName("dystans")[0];
  if (!distanceEl) return;
  const odleglosc = parseFloat(distanceEl.innerText);
  const daleko = "za daleko";
  // 增加NaN判断避免文本为空/非数字时报错
  if (!isNaN(odleglosc) && odleglosc > 200) {
    alert(daleko);
  }
}

// 页面初始加载时执行一次判断，保留原有初始加载的弹窗逻辑
checkDistance();

// 初始化内容变化监听器
const contentObserver = new MutationObserver((mutations) => {
  mutations.forEach(() => {
    // 检测到内容变动就重新执行判断
    checkDistance();
  })
});

const targetSpan = document.getElementById("dystans");
if (targetSpan) {
  contentObserver.observe(targetSpan, {
    characterData: true, // 监听文本节点本身的内容修改
    childList: true, // 监听子节点增删（兼容直接替换文本节点的场景）
    subtree: true // 监听所有后代节点的变动
  });
}

HTML 代码（无需修改） #

<span data-pafe-form-builder-live-preview="lechnarlok" class="dystans" id="dystans">500</span>

补充：如果你可以直接修改动态更新span文本的业务代码，也可以在每次更新span.innerText的逻辑后直接手动调用checkDistance()，性能开销比MutationObserver更低。如果是第三方表单插件自动更新内容、无法修改更新逻辑的场景，优先用上面的MutationObserver方案。

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