If statement to make a button appear/disappear based on the results of game

Question

I have 1v1 browser games on my website & I'm trying to make a button show up for the winner & not show up for the loser on a pop-up modal in the post-game. I'm specifically targeting the "Claim Prize" button on the pop-up" Pop-up Modal "Claim Prize"

HTML for the Button:

  <button class="button button--secondary button--small modal__button"
  data-button="claim">
  Claim Prize
</button>

Js used to define the winner.

function endGame() {
  if(!isGameOver) return;
  let text;
  if(scores.player > scores.opponent) 
    text = TEXTS.win;
  else if(scores.player < scores.opponent)
    text = TEXTS.lose;
  else
    text = TEXTS.draw;
  
  text += `<br> Scores: ${scores.player} - ${scores.opponent}`;

  showEndScreen(text);

Current if statement to attempt to make it show only for the winner:

<script>
  var theyLost = (TEXTS.Win)
  if (theyLost) true;
  document.getElementById("claim").style.display="none";
</script>

Answer 1

Not sure if this will work, but perhaps you can try directly making the button visible if the player wins:

function endGame() {
  if(!isGameOver) return;
  let text;
  if(scores.player > scores.opponent){
    text = TEXTS.win;
    document.getElementById("claim").style.display="none";
  }else if(scores.player < scores.opponent){
    text = TEXTS.lose;
  }else{
    text = TEXTS.draw;
  }
  text += `<br> Scores: ${scores.player} - ${scores.opponent}`;

  showEndScreen(text);
}