如何检查HTML元素内容并在JS/TS的if语句中使用？代码问题求解

你当前代码的核心问题是：变量gameButton存储的是CSS选择器字符串#GameButton，而非按钮元素的实际文本内容。所以gameButton.includes("-")检查的是选择器字符串里有没有"-"，这个字符串本身不含"-"，所以永远走else分支。

正确实现步骤 #

要实现需求，需要先获取DOM元素，再提取它的文本内容，最后进行判断：

1. 获取目标按钮元素
2. 提取按钮的文本内容（处理可能的空值和空格）
3. 判断文本是否包含"-"，执行对应逻辑

完整代码示例（TypeScript） #

// 1. 获取按钮DOM元素，指定类型为HTMLButtonElement（TS类型提示）
const gameButtonElement = document.querySelector<HTMLButtonElement>('#GameButton');

if (gameButtonElement) {
  // 2. 获取文本内容，去除前后空格，处理空值情况
  const buttonText = gameButtonElement.textContent?.trim() || '';
  
  // 3. 判断文本是否包含"-"
  if (buttonText.includes('-')) {
    console.log("Stop the game");
    // 这里添加停止游戏的实际逻辑，比如：
    // clearGameInterval();
  } else {
    console.log("Click button to continue");
    // 执行点击按钮操作
    gameButtonElement.click();
  }
} else {
  // 容错处理：元素不存在时的提示
  console.error("未找到游戏按钮元素");
}

补充说明 #

• 关于文本获取：
  • textContent：获取元素内所有文本（包括隐藏元素的文本）
  • innerText：仅获取元素内的可见文本
    根据你的实际需求选择即可，示例中用textContent更通用。
• 可选链?.和空值合并||：防止textContent为null时报错，保证代码健壮性。

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