I'm currently learning JavaScript. For my first project, I'm creating a rock, paper, scissors project. My problem is, when I click each button, it's not returning what it's supposed to return. For example, when the player clicked the paper, and the random number for computerPlay() also returns a paper, the result should be "It's a tie!" but it's not returning it. Here's an image of the console when I tried clicking the buttons. The scores are also not adding properly. Also, here's my code:

/* Generate random numbers for computer play */
function computerPlay() {
  let computerSelection = Math.floor(Math.random() * 3);
  if (computerSelection === 0) {
    return ("rock")
  }
  if (computerSelection === 1) {
    return ("paper")
  }
  if (computerSelection === 2) {
    return ("scissors")
  }
}
/* Return rock, paper or scissors when button clicked */
function playerButtons() {
  btnChoices.forEach(choices => {
    choices.addEventListener('click', (e) => {

      const rockBtn = document.querySelector(".rock");
      const paperBtn = document.querySelector(".paper");
      const scissorsBtn = document.querySelector(".scissors");
      let btnChoices = [rockBtn, paperBtn, scissorsBtn];

      let playerSelection = e.target;

      if (playerSelection.classList.contains("rock")) {
        playRound("rock");
        console.log("rock");
      }
      if (playerSelection.classList.contains("paper")) {
        playRound("paper");
        console.log("paper");
      }
      if (playerSelection.classList.contains("scissors")) {
        playRound("scissors");
        console.log("scissors");
      }

    })
  })
}
console.log(playerButtons());


/* Main Game */
function playRound(playerSelect) {
  console.log(computerPlay());
  let computerSelect = computerPlay();
  let computerScore = 0;
  let playerScore = 0;

  const result = document.querySelector(".result-text");
  const playerScoreNum = document.querySelector(".player-score");
  const computerScoreNum = document.querySelector(".computer-score");

  /* Select players' name */
  let playerName = document.querySelector(".player-name").textContent;
  let computerName = document.querySelector(".svt-name").textContent;

  if (playerSelect === computerSelect) {
    result.textContent = "It's a tie!";
    console.log("It's a tie!")
  } else if (playerSelect === "rock") {
    if (computerSelect === "paper") {
      result.textContent = (computerName   " chose paper! "   computerName   " won this round.");
      computerScore  
      computerScoreNum.textContent = computerScore;

      console.log(computerName   " chose paper! "   computerName   " won this round.")
    } else {
      result.textContent = (computerName   " chose scissors! "   playerName   " won this round.");
      playerScore  ;
      playerScoreNum.textContent = playerScore;

      // console.log(playerName   " won this round!");
      console.log(computerName   " chose scissors! "   playerName   " won this round.");
    }
  } else if (playerSelect === "paper") {
    if (computerSelect === "scissors") {
      // result.textContent = (computerName   " won this round!");
      result.textContent = (computerName   " chose scissors! "   computerName   " won this round.");
      computerScore  
      computerScoreNum.textContent = computerScore;

      console.log(computerName   " chose scissors! "   computerName   " won this round.");
      // console.log(computerName   " won this round!");
    } else {
      result.textContent = (computerName   " chose rock! "   playerName   " won this round.");
      playerScore  
      computerScoreNum.textContent = playerScore;

      console.log(computerName   " chose rock! "   playerName   " won this round.");
      // console.log(playerName   " won this round!");
    }
  } else if (playerSelect === "scissors") {
    if (computerSelect === "rock") {
      result.textContent = (computerName   " chose rock! "   computerName   " won this round.");
      computerScore  
      computerScoreNum.textContent = computerScore;

      console.log(computerName   " chose rock! "   computerName   " won this round.");
      // console.log(computerName   " won this round!");
    } else {
      result.textContent = (computerName   " chose paper! "   playerName   " won this round.");
      // result.textContent = (playerName   " won this round!");
      playerScore  
      playerScoreNum.textContent = playerScore;

      console.log(computerName   " chose paper! "   playerName   " won this round.");
      // console.log(playerName   " won this round!");
    }
  }
}

CodePudding user response：

Try to call the computerPlay function only once.

const play = computerPlay();
console.log(play);
let computerSelect = play;

CodePudding user response：

You are calling the random function twice instead of using the same cached value.

console.log(computerPlay());
let computerSelect = computerPlay();

The results should match if you only invoke the function once and store the value.

const computerSelect = computerPlay();
console.log(computerSelect);