How do I use two different querySelectors in an if statement to display two different messages

Issue

I have two div elements with the ids displayText and refreshText. They have almost the same CSS styling, apart from trying to position refreshText below displayText. In the JavaScript, I used two querySelectors to try to accomplish this within an if statement. However, it doesn't seem to work. Can I use two separate querySelectors within the same if-else statement?

//DETERMINE WINNER FUNCTION
function determineWinner({
  player,
  enemy,
  timerId
}) {
  clearTimeout(timerId)
  document.querySelector('#displayText').style.display = 'flex'
  if (player.health === enemy.health) {
    document.querySelector('#displayText').innerHTML = 'Tie'
    document.querySelector('#refreshText').innerHTML = 'Refresh Screen to Continue'
  } else if (player.health > enemy.health) {
    document.querySelector('#displayText').innerHTML = 'Player 1 Wins'
    document.querySelector('#refreshText').innerHTML = 'Refresh Screen to Continue'
  } else if (enemy.health > player.health) {
    document.querySelector('#displayText').innerHTML = 'Player 2 Wins'
    document.querySelector('#refreshText').innerHTML = 'Refresh Screen to Continue'
  }
}

#displayText {
  align-items: center;
  justify-content: center;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  position: absolute;
  color: white;
  display: none;
}

#refreshText {
  align-items: center;
  justify-content: center;
  top: 10;
  right: 0;
  bottom: 0;
  left: 0;
  position: absolute;
  color: white;
  display: none;
}

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
<div id="red-container">
  <!--Smaller container-->
  <div id="smaller-red-container">

    <!-- player health -->
    <div id="player-container">
      <div id="player-health"></div>
      <div id="player-health-cover"></div>
    </div>

    <!-- timer -->
    <div id="timer">
      10
    </div>

    <!-- enemy health -->
    <div id="enemy-container">
      <div id="enemy-health"></div>
      <div id="enemy-health-cover"></div>
    </div>
  </div>
  <div id="displayText">Tie</div>
  <div id="refreshText">Refresh Screen</div>
  <canvas></canvas>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js" integrity="sha512-VEBjfxWUOyzl0bAwh4gdLEaQyDYPvLrZql3pw1ifgb6fhEvZl9iDDehwHZ+dsMzA0Jfww8Xt7COSZuJ/slxc4Q==" crossorigin="anonymous" referrerpolicy="no-referrer">
</script>

Solution

I created a Player class and then created two players, tom and jerry. You can set their health to see how the results are displayed.

I changed the way that determineWinner() accepts arguments, so that it accepts three arguments and not an object.

The problem must be with the way you are calling your function or with the CSS, so I created a checkWinner() function and called your function determineWinner() from there.

I removed the initial innerText of the two message divs, and I changed the color of the messages from red to white.

Your if else code seems to work.

//DETERMINE WINNER FUNCTION
function determineWinner(
  player,
  enemy,
  timerId
) {
  clearTimeout(timerId)
  document.querySelector('#displayText').style.display = 'flex'
  if (player.health === enemy.health) {
    document.querySelector('#displayText').innerText = 'Tie'
    document.querySelector('#refreshText').innerText = 'Refresh Screen to Continue'
  } else if (player.health > enemy.health) {
    document.querySelector('#displayText').innerText = 'Player 1 Wins'
    document.querySelector('#refreshText').innerText = 'Refresh Screen to Continue'
  } else if (enemy.health > player.health) {
    document.querySelector('#displayText').innerText = 'Player 2 Wins'
    document.querySelector('#refreshText').innerText = 'Refresh Screen to Continue'
  }
}

class Player {
  constructor(health) {
    this.health = Number(health);
  }
}

function checkWinner() {
  let tom = new Player(document.querySelector('#tomHealth').value);
  let jerry = new Player(document.querySelector('#jerryHealth').value);

  determineWinner(jerry, tom, null);
}

#displayText {
  align-items: center;
  justify-content: center;
  top: 20;
  right: 0;
  bottom: 0;
  left: 0;
  position: absolute;
  color: red;
}

#refreshText {
  align-items: center;
  justify-content: center;
  top: 10;
  right: 0;
  bottom: 0;
  left: 0;
  position: absolute;
  color: red;
}

<div>
  Player 1 (jerry)<input type="number" id="jerryHealth" value="6"> Player 2 (tom)<input type="number" id="tomHealth" value="5">
  <button onclick="checkWinner()">Check Winner</button>
</div>
<div id="red-container">
  <!--Smaller container-->
  <div id="smaller-red-container">

    <!-- player health -->
    <div id="player-container">
      <div id="player-health"></div>
      <div id="player-health-cover"></div>
    </div>

    <!-- timer -->
    <div id="timer">
      10
    </div>

    <!-- enemy health -->
    <div id="enemy-container">
      <div id="enemy-health"></div>
      <div id="enemy-health-cover"></div>
    </div>
  </div>
  <div id="displayText"></div>
  <div id="refreshText"></div>
  <canvas></canvas>
</div>

Answered By - PeterJames