JS网球计分器：如何在元素显示指定文本时触发弹窗？

你的代码问题所在 #

• document.getElementById("winner1") 获取的是DOM元素对象，不是元素的文本内容，直接和字符串比较永远不会成立。
• <p> 元素没有 value 属性，获取文本内容应该用 textContent 或 innerText。
• 你的 if 语句只会执行一次，不会持续监听元素内容的变化。

两种解决方案 #

方案一：直接在设置获胜文本时触发弹窗（推荐）

这是最简单直接的方式，在你设置"player 1 won the set"文本的代码后面，直接添加弹窗逻辑：

// 假设这是玩家得分到45时的处理代码
let winner1 = document.getElementById("winner1");
// 设置获胜提示文本
winner1.textContent = "player 1 won the set";
// 立刻弹出确认提示
alert("do you want to play another set?");

方案二：用MutationObserver监听元素内容变化

如果无法直接修改设置文本的代码，就用MutationObserver来监听元素的内容变化，当文本符合条件时触发弹窗：

let winner1 = document.getElementById("winner1");

// 创建观察器，监听DOM变化
const observer = new MutationObserver((mutations) => {
  mutations.forEach(() => {
    // 去除文本前后空格后判断是否匹配
    if (winner1.textContent.trim() === "player 1 won the set") {
      alert("do you want to play another set?");
      // 可选：停止观察，避免重复触发弹窗
      observer.disconnect();
    }
  });
});

// 配置观察选项，确保能检测到文本变化
const observeConfig = {
  childList: true,
  subtree: true,
  characterData: true
};

// 开始观察目标元素
observer.observe(winner1, observeConfig);

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