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>
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);
}