如何在if-else语句中使用两个querySelector显示不同消息及问题排查

关于在if-else中使用多个querySelector #

完全可以在同一个if-else语句中使用多个独立的document.querySelector()调用——你当前的代码已经在这么做了，这不是导致问题的原因。你的代码逻辑本身是有效的，真正的问题出在元素显示控制和CSS定位上。

你的代码存在的两个核心问题 #

1. refreshText元素从未被设置为显示状态 #

在函数开头你只打开了displayText的显示：

document.querySelector('#displayText').style.display = 'flex'

但refreshText的display属性一直是CSS里默认的none，所以它根本不会出现在页面上。

2. CSS定位错误 #

#refreshText的top: 10缺少单位（比如px），浏览器无法识别这个值，会忽略该属性，导致两个元素完全重叠。同时你给两个元素都设置了top:0和bottom:0，会让元素高度撑满整个容器，进一步加重重叠问题。

修复方案 #

步骤1：同时控制两个元素的显示 #

在函数开头添加一行代码，把refreshText也设置为显示：

function determineWinner({
  player,
  enemy,
  timerId
}) {
  clearTimeout(timerId)
  // 同时显示两个文本元素
  document.querySelector('#displayText').style.display = 'flex'
  document.querySelector('#refreshText').style.display = 'flex'
  // ... 后续判断逻辑不变
}

步骤2：修复CSS定位，实现垂直排列 #

这里提供两种简单的实现方式：

方案A：调整绝对定位属性（保留现有HTML结构）

给refreshText添加正确单位，调整top值让它在displayText下方，同时去掉多余的bottom属性避免高度撑满：

#displayText {
  align-items: center;
  justify-content: center;
  top: 40%;
  right: 0;
  left: 0;
  position: absolute;
  color: white;
  display: none;
  height: 40px; /* 固定高度避免文本换行重叠 */
}

#refreshText {
  align-items: center;
  justify-content: center;
  top: 50%; /* 比displayText的top值大，确保在下方 */
  right: 0;
  left: 0;
  position: absolute;
  color: white;
  display: none;
  height: 40px;
}

方案B：用容器包裹文本（更优雅的布局方式）

修改HTML，把两个文本放在一个容器里，用flex垂直排列：

<div id="textContainer">
  <div id="displayText">Tie</div>
  <div id="refreshText">Refresh Screen</div>
</div>

然后修改CSS：

#textContainer {
  position: absolute;
  top: 40%;
  left: 0;
  right: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 20px; /* 两个文本之间的间距 */
}

#displayText, #refreshText {
  color: white;
}

对应的JavaScript只需要控制容器的显示即可：

function determineWinner({
  player,
  enemy,
  timerId
}) {
  clearTimeout(timerId)
  document.querySelector('#textContainer').style.display = 'flex'
  // ... 后续修改innerHTML的逻辑不变
}

额外优化：缓存DOM元素 #

多次重复调用document.querySelector()会重复查询DOM，建议提前缓存元素提升性能：

// 在函数外部缓存元素
const displayTextEl = document.querySelector('#displayText')
const refreshTextEl = document.querySelector('#refreshText')

function determineWinner({
  player,
  enemy,
  timerId
}) {
  clearTimeout(timerId)
  displayTextEl.style.display = 'flex'
  refreshTextEl.style.display = 'flex'
  
  if (player.health === enemy.health) {
    displayTextEl.innerHTML = 'Tie'
    refreshTextEl.innerHTML = 'Refresh Screen to Continue'
  } else if (player.health > enemy.health) {
    displayTextEl.innerHTML = 'Player 1 Wins'
    refreshTextEl.innerHTML = 'Refresh Screen to Continue'
  } else {
    displayTextEl.innerHTML = 'Player 2 Wins'
    refreshTextEl.innerHTML = 'Refresh Screen to Continue'
  }
}

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