I have made a simple rock, scissors and paper game. Everything is working fine except one thing. Once the user or the computer has won the game, the function propmts for retry if computer won or for playing again if the user won.The problem is that right after that prompt the function runs once more rather than waiting for the user input. The function takes computerChoice and userChoice I don't know from where. This is what I am trying to understand. I have added the code, please check if I couldn't explain the problem well.

let clickCount = 0;
let computerCount = 0;
let userCount = 0;
let userChoice;

function reply_Click(textValue) {
  clickCount  ;
  console.log(clickCount);
  userChoice = document.getElementById(textValue).getAttribute("textValue").toLocaleLowerCase();
  let computerChoice;

  function computerPlay() {
    let options;
    options = ["rock", "paper", "scissor"];
    computerChoice = (options[Math.floor(Math.random() * 1 * options.length)]);
    return computerChoice;
  }

  computerPlay();
  play(userChoice, computerChoice);
  console.log("User", userCount);
  console.log("Computer", computerCount);

  if (computerCount == 5) {
    computerCount = 0;
    userCount = 0;
    clickCount = 0;
    alert("Computer has won.");
    prompt("Retry?", "Yes");
    if (true) {
      reply_Click(textValue);
    }
  } else if (userCount == 5) {
    computerCount = 0;
    userCount = 0;
    clickCount = 0;
    alert("User has won.");
    prompt("Want to play again?", "Yes");
    if (true) {
      reply_Click(textValue);
    }
  }

  // if (clickCount <= 5){
  //     computerPlay();
  //     play(userChoice,computerChoice);
  // }
  // else {
  //     prompt ("Want to retry?", "Yes");
  //     if (true){
  //         clickCount = 0;
  //         reply_Click(textValue);
  //     }
  //     else{
  //         alert("Good Bye");
  //     }
  // }
}

function play(user, computer) {
  if (user === computer) {
    alert("The game is a tie.");
  } else if (user === "scissor" && computer === "paper") {
    userCount  ;
    alert("You win.");
  } else if (user === "paper" && computer === "scissor") {
    computerCount  ;
    alert("Computer wins.");
  } else if (user === "rock" && computer === "paper") {
    computerCount  ;
    alert("Computer wins.");
  } else if (user === "paper" && computer === "rock") {
    userCount  ;
    alert("You win.");
  } else if (user === "paper" && computer === "scissor") {
    computerCount  ;
    alert("Computer wins.");
  } else if (user === "scissor" && computer === "paper") {
    userCount  ;
    alert("You win.");
  } else if (user === "rock" && computer === "scissor") {
    userCount  ;
    alert("You win.");
  } else if (user === "scissor" && computer === "rock") {
    computerCount  ;
    alert("Computer wins.");
  }
}

* {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}


/* Header Start */

.header {
  background-color: rgba(12, 12, 12, 0.692);
}

.navbar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5em;
}

.paper img,
.rock img,
.scissor img {
  height: 100px;
  width: 200px;
  padding: 30px 0px;
  cursor: pointer;
}

.scissor {
  transform: rotate(140deg);
}

.ampersand {
  font-size: 70px;
  padding: 30px 40px;
  transform: skew(-20deg);
}


/* Header End */


/* Container Start */

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgba(12, 12, 12, 0.692);
  padding: 30px 0px;
}

.score-heading p {
  font-size: 50px;
}

.score {
  display: flex;
  gap: 500px;
}

#userScore p,
#computerScore p {
  font-size: 30px;
  font-weight: bold;
}


/* Container End */


/* Game Start */

.game {
  display: flex;
  justify-content: center;
  background-color: rgba(12, 12, 12, 0.692);
  gap: 40px;
}

#rock,
#paper,
#scissor {
  display: flex;
  border: 2px solid rgb(190, 174, 174);
  height: 400px;
  width: 300px;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  cursor: pointer;
}

#rock img,
#paper img,
#scissor img {
  max-height: 100px;
  max-width: 300px
}

#rock:hover,
#paper:hover,
#scissor:hover {
  box-shadow: 0px 0px 20px white;
  transition: cubic-bezier(.51, .43, .35, .61);
  transform: translateY(-5px);
  transition-duration: 250ms;
}


/* Game End */

<!DOCTYPE html>
<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>Document</title>
  <link rel="stylesheet" href="style.css">
  <script src="/game.js"></script>
</head>

<body>
  <div >
    <nav >
      <div >
        <img src="/SVGs/576663.svg" alt="Rock">
      </div>
      <div >
        <img src="/SVGs/paper.svg" alt="Paper">
      </div>
      <div >
        &amp;
      </div>
      <div >
        <img src="/SVGs/scissors.svg" alt="Scissors">
      </div>
    </nav>
  </div>
  <div >
    <div >
      <p>Score</p>
    </div>
    <div >
      <div id="userScore">
        <p>You:<span id="userScoreCount">0</span></p>
        <div ></div>
      </div>
      <div id="computerScore">
        <p>Computer:<span id="computerScoreCount">0</span></p>
        <div ></div>
      </div>
    </div>
  </div>
  <div >
    <div id="rock" dataValue="1" textValue="Rock" onclick="reply_Click(this.id)">
      <img src="/SVGs/576663.svg" alt="Rock">
    </div>
    <div id="paper" dataValue="1" textValue="Paper" onclick="reply_Click(this.id)">
      <img src="/SVGs/paper.svg" alt="Paper">
    </div>
    <div id="scissor" dataValue="1" textValue="Scissor" onclick="reply_Click(this.id)">
      <img src="/SVGs/scissors.svg" alt="Scissors">
    </div>
  </div>
</body>

</html>

CodePudding user response：

It happens because you call the replyClick again after you prompt the user to play again.

if (true) {
  reply_Click(textValue);
}

You don't need this code because you already reset the game before this.