Displaying a message only once; cannot make it go away-CodePudding

Hei folks! I keep wrestling with this thing on the RPS project for quite some time now, where I display a message when it's tie, but I can't figure a solution to make it go away when the round it's not a tie.

The game plays good, except for the last two else if's. on one, I tried to show the message when the player's choice is identical with the cpu's, and show the message, and on the other message, I thought that I could make an if to replace the previous tie message with an empty string, by using an if like if playerselection !== computerplay then the string from tie message, would change to this ' '. but obviously not working! I will leave here the code

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Rock Paper Scissors</title>
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="queries.css" />
  </head>
  <body>
    <div >
      <h1>Rock Paper Scissors</h1>
      <h2>Play a round of 5 games of Rock, Paper, Scissors!</h2>
      <h3>Good luck!</h3>
    </div>
    <div >
      <button
        
        value="ROCK"
        onclick="playerSelection(this.value)"
      >
        <img  src="img/rock-min.png" alt="rock button" />
      </button>
      <button
        
        value="PAPER"
        onclick="playerSelection(this.value)"
      >
        <img  src="img/paper-min.png" alt="paper button" />
      </button>
      <button
        
        value="SCISSORS"
        onclick="playerSelection(this.value)"
      >
        <img  src="img/scissors-min.png" alt="" />
      </button>
    </div>
    <div >
      <div>Player Score - <span id="playerscore">0</span></div>
      <div>Computer Score - <span id="computerscore">0</span></div>
    </div>

    <div >
      <div >
        You have picked - <span id="playerpick"></span>
      </div>
      <div >
        CPU has picked - <span id="cpupick"><em></em></span>
      </div>
    </div>

    <div >
      <div >
        <span id="playerWin"></span>
      </div>
      <div ><span id="cpuWin"></span></div>
      <div></div>
      <div ><span id="tieGame"></span></div>
    </div>
    <button >Reset the score!</button>
  </body>
  <script src="script.js" defer></script>
</html>

  margin: 0 auto;
  box-sizing: border-box;
  max-width: 900px;
}

html {
  border: 5px solid black;
  margin-top: 5px;
}

h1 {
  font-size: 4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background: -webkit-linear-gradient(rgb(127, 69, 69), rgb(200, 168, 168));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

h2 {
  display: flex;
  justify-content: center;
  margin-top: 15px;
  font-size: 2rem;
  color: darkred;
}

h3 {
  display: flex;
  justify-content: center;
  margin-top: 10px;
  font-size: 1.5rem;
}

.buttons {
  display: flex;
  gap: 1rem;
  padding: 2rem;
}

.active {
  background-color: white;
  color: blue;
}

#rockBtn:hover,
#paperBtn:hover,
#scissorsBtn:hover {
  letter-spacing: 5px;
  color: #e9f01d;
  cursor: crosshair;
  box-shadow: 2px 8px rgb(181, 180, 180);
}

#paperBtn,
#scissorsBtn,
#rockBtn {
  background-color: black;
  font-size: 1.2rem;
  padding: 0.7rem;
  color: white;
}

#start {
  display: flex;
  padding: 1rem;
  background-color: blue;
  color: white;
  font-size: 1.4rem;
  font-weight: bold;
}

.score-tracker {
  display: flex;
  justify-content: center;
  font-size: 2rem;
  font-weight: bold;
  color: rgb(122, 165, 42);
}

#playerscore,
#computerscore {
  color: #000;
}

.selectedChoices {
  display: flex;
  font-size: 2rem;
  font-weight: normal;
  margin-top: 2rem;
}

.game-decisions {
  font-size: 20px;
  color: rgb(80, 53, 53);
  font-weight: bold;
  /* display: flex;
  justify-content: center; */
  /* flex-direction: column; */
}

#playerWin {
  display: flex;
  justify-content: center;
  align-items: center;
  color: rgb(30, 115, 213);
  font-size: 22px;
}

#cpuWin {
  display: flex;
  justify-content: center;
  align-items: center;
  color: rgb(30, 115, 213);
  font-size: 22px;
}

#playerpick,
#cpupick {
  color: rgb(23, 132, 132);
}

.reset {
  padding: 1rem;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  text-align: center;
  background-color: rgb(71, 186, 228);
  font-weight: bold;
  font-size: 20px;
  width: 20rem;
  margin-top: 2rem;
  margin-bottom: 5px;
}

.reset:hover {
  box-shadow: 5px 5px 35px rgb(102, 182, 48);
}

button {
  border: none;
  background-color: rgb(99, 95, 136);
  font-size: 20px;
  color: #fff;
  padding: 10px 20px;
  cursor: pointer;
  border-radius: 3rem;
}

.active,
button:hover {
  background-color: rgb(255, 99, 47);
  box-shadow: 5px 5px 35px rgb(226, 240, 28);
  color: yellow;
  transition-delay: 2ms;
  transition-duration: 0.5s;
}

.img-button {
  width: 200px;
  height: 200px;
}

  let choices = ["ROCK", "PAPER", "SCISSORS"];
  let randomPick = Math.floor(Math.random() * choices.length);
  console.log(choices[randomPick]);
  return choices[randomPick];
}
let overallWinner;
let computerScore = 0;
let playerScore = 0;

function playerSelection(val) {
  return val;
}

function playRound(playerSelection, computerPlay) {
  if (playerSelection == "ROCK" && computerPlay == "SCISSORS") {
    playerScore  ;
    playerScoreHtml.textContent = playerScore;
    playerPickHtml.textContent = playerSelection;
    cpuPickHtml.textContent = computerPlay;
  } else if (playerSelection == "PAPER" && computerPlay == "ROCK") {
    playerScore  ;
    playerScoreHtml.textContent = playerScore;
    playerPickHtml.textContent = playerSelection;
    cpuPickHtml.textContent = computerPlay;
  } else if (playerSelection == "SCISSORS" && computerPlay == "PAPER") {
    playerScore  ;
    playerScoreHtml.textContent = playerScore;
    playerPickHtml.textContent = playerSelection;
    cpuPickHtml.textContent = computerPlay;
  } else if (playerSelection == "ROCK" && computerPlay == "PAPER") {
    computerScore  ;
    computerScoreHtml.textContent = computerScore;
    playerPickHtml.textContent = playerSelection;
    cpuPickHtml.textContent = computerPlay;
  } else if (playerSelection == "PAPER" && computerPlay == "SCISSORS") {
    computerScore  ;
    computerScoreHtml.textContent = computerScore;
    playerPickHtml.textContent = playerSelection;
    cpuPickHtml.textContent = computerPlay;
  } else if (playerSelection == "SCISSORS" && computerPlay == "ROCK") {
    computerScore  ;
    computerScoreHtml.textContent = computerScore;
    playerPickHtml.textContent = playerSelection;
    cpuPickHtml.textContent = computerPlay;
  } else if (playerSelection === computerPlay) {
    let tieMessage = "It's a tie!";
    console.log(tieMessage);
    tieHtml.textContent = tieMessage;
    playerPickHtml.textContent = playerSelection;
    cpuPickHtml.textContent = playerSelection;
  } else if (playerSelection !== computerPlay) {
    tieHtml.textContent = "";
  }
}

function game(e) {
  const selectedValue = e.currentTarget.value;
  console.log(e.currentTarget, "button value");
  playRound(playerSelection(selectedValue), computerPlay());
  if (computerScore == 5) {
    const cpuWinner = "The CPU has won. Pretty shameful, don't  you think?";
    console.log(cpuWinner);
    cpuWin.textContent = cpuWinner;
  } else if (playerScore == 5) {
    const playerWinner = "You have won!";
    console.log(playerWinner);
    playerWin.textContent = playerWinner;
  }
  // Disable buttons, dictating the game is over whenever a player reaches the score of 5.
  if (computerScore == 5 || playerScore == 5) {
    rockBtn.disabled = true;
    paperBtn.disabled = true;
    scissorsBtn.disabled = true;
  }
}

const rockBtn = document.querySelector(".rockBtn");
rockBtn.addEventListener("click", game);

const paperBtn = document.querySelector(".paperBtn");
paperBtn.addEventListener("click", game);

const scissorsBtn = document.querySelector(".scissorsBtn");
scissorsBtn.addEventListener("click", game);

const playerScoreHtml = document.querySelector("#playerscore");
const computerScoreHtml = document.querySelector("#computerscore");
console.log(computerScoreHtml);
console.log(playerScoreHtml);

const playerPickHtml = document.querySelector("#playerpick");
const cpuPickHtml = document.querySelector("#cpupick");

const playerWin = document.querySelector("#playerWin");
const tieHtml = document.querySelector("#tieGame");

//refresh page for new game
const resetBtn = document.querySelector(".reset");
resetBtn.addEventListener("click", () => location.reload());

let buttons = document.querySelectorAll("button");

buttons.forEach((button) => {
  button.addEventListener("click", function () {
    buttons.forEach((btn) => btn.classList.remove("active"));
    this.classList.add("active");
  });
});

Figured it out somehow, but I'm afraid I've written too much code already. So when it's a tie, it will be like tieHtml.textcontent = 'It's a tie' and to make it go away, I've used at any other if a tieHtml.textcontent = '' so an empty string.

CodePudding user response：

You need to remove the else in front of the last if.

Because when the selections aren't the same, it will trigger any of the above ifs and therefore not trigger the else.

CodePudding user response：

try replacing the div where you display the result like so:

<div >
      <div >
        <span id="game-result"></span>
      </div>
</div>

and update the innerText of game-result in your javascript according to the game state in your conditional statements to "player wins", "computer wins" "it's a tie" it will make your javascript a few lines shorter your html too. if their displayed differently (like in a different position...etc) you can do that by adding class names via your javascript and styling them in your css.