Javascript rock-paper-scissors game issue with the score-CodePudding

So here is my javascript code for rock-paper-scissors game for TOP(I know the code is not very tidy, I am new to coding). I have a problem with the score. I have a player score and a computer score. It should go up 1 point according to the winner, but sometimes it goes up 2 points and sometimes it goes up both for the player and the computer.

function getComputerChoice() {
  let items = ["rock", "paper", "scissors"];
  const randomitem = items[Math.floor(Math.random() * items.length)];
  return randomitem;
}
playerScore = 0;
compScore = 0;

function playRound() {

  const computerSelection = getComputerChoice();

  if (playerSelection === computerSelection) {
    return ("it is a tie!");

  } else if (playerSelection == "rock" && computerSelection == "scissors") {
    playerScore  = 1;
    return "rock beats scissors you win!";

  } else if (playerSelection == "rock" && computerSelection == "paper") {
    compScore  = 1;
    return "paper beats rock you lose!";

  } else if (playerSelection == "paper" && computerSelection == "scissors") {
    compScore  = 1;
    return "scissors beats paper you lose!";

  } else if (playerSelection == "paper" && computerSelection == "rock") {
    playerScore  = 1;
    return "paper beats rock you win!";

  } else if (playerSelection == "scissors" && computerSelection == "paper") {
    playerScore  = 1;
    return "scissors beats paper you win!";
  } else if (playerSelection == "scissors" && computerSelection == "rock") {
    compScore  = 1;
    return "rock beats scissors you lose!";
  } else {
    return "you should choose from rock,paper,scissors";
  }



}

let rock = document.querySelector("#rock");
let paper = document.querySelector("#paper");
let scissors = document.querySelector("#scissors");

rock.addEventListener("click", event => {
  playerSelection = "rock";
  playRound();
  let winner = playRound();
  document.getElementById("winner").innerHTML = winner;
  document.getElementById("player-score").innerHTML = `Player Score: ${playerScore}`;
  document.getElementById("comp-score").innerHTML = `Computer Score: ${compScore}`;

});
paper.addEventListener("click", event => {
  playerSelection = "paper";
  playRound();
  let winner = playRound();
  document.getElementById("winner").innerHTML = winner;
  document.getElementById("player-score").innerHTML = `Player Score: ${playerScore}`;
  document.getElementById("comp-score").innerHTML = `Computer Score: ${compScore}`;

});
scissors.addEventListener("click", event => {
  playerSelection = "scissors";
  playRound();
  let winner = playRound();
  document.getElementById("winner").innerHTML = winner;
  document.getElementById("player-score").innerHTML = `Player Score: ${playerScore}`;
  document.getElementById("comp-score").innerHTML = `Computer Score: ${compScore}`;

});

<div >
  <div style="font-size:100px">choose your fighter!</div>
  <div style="font-size:50px">first to score 5 points wins the game</div>
</div>

<div >
  <div id="player-score">player-score:0</div>
  <div id="comp-score">comp-score:0</div>
</div>

<div >
  <button  id="rock">rock</button>
  <button  id="paper">paper</button>
  <button  id="scissors">scissors</button>
</div>

<div >
  <div id="winner"></div>
</div>

I tried to find a pattern but it seems random. Could you help me figure out why am I having this issue?

CodePudding user response：

You are calling playRound twice

Call it only one time per click

function getComputerChoice() {
  let items = ["rock", "paper", "scissors"];
  const randomitem = items[Math.floor(Math.random() * items.length)];
  return randomitem;
}
playerScore = 0;
compScore = 0;

function playRound() {

  const computerSelection = getComputerChoice();

  if (playerSelection === computerSelection) {
    return ("it is a tie!");

  } else if (playerSelection == "rock" && computerSelection == "scissors") {
    playerScore  = 1;
    return "rock beats scissors you win!";

  } else if (playerSelection == "rock" && computerSelection == "paper") {
    compScore  = 1;
    return "paper beats rock you lose!";

  } else if (playerSelection == "paper" && computerSelection == "scissors") {
    compScore  = 1;
    return "scissors beats paper you lose!";

  } else if (playerSelection == "paper" && computerSelection == "rock") {
    playerScore  = 1;
    return "paper beats rock you win!";

  } else if (playerSelection == "scissors" && computerSelection == "paper") {
    playerScore  = 1;
    return "scissors beats paper you win!";
  } else if (playerSelection == "scissors" && computerSelection == "rock") {
    compScore  = 1;
    return "rock beats scissors you lose!";
  } else {
    return "you should choose from rock,paper,scissors";
  }



}

let rock = document.querySelector("#rock");
let paper = document.querySelector("#paper");
let scissors = document.querySelector("#scissors");

rock.addEventListener("click", event => {
  playerSelection = "rock";
  let winner = playRound();
  document.getElementById("winner").innerHTML = winner;
  document.getElementById("player-score").innerHTML = `Player Score: ${playerScore}`;
  document.getElementById("comp-score").innerHTML = `Computer Score: ${compScore}`;

});
paper.addEventListener("click", event => {
  playerSelection = "paper";
  let winner = playRound();
  document.getElementById("winner").innerHTML = winner;
  document.getElementById("player-score").innerHTML = `Player Score: ${playerScore}`;
  document.getElementById("comp-score").innerHTML = `Computer Score: ${compScore}`;

});
scissors.addEventListener("click", event => {
  playerSelection = "scissors";
  let winner = playRound();
  document.getElementById("winner").innerHTML = winner;
  document.getElementById("player-score").innerHTML = `Player Score: ${playerScore}`;
  document.getElementById("comp-score").innerHTML = `Computer Score: ${compScore}`;

});

<div >
  <div style="font-size:100px">choose your fighter!</div>
  <div style="font-size:50px">first to score 5 points wins the game</div>
</div>

<div >
  <div id="player-score">player-score:0</div>
  <div id="comp-score">comp-score:0</div>
</div>

<div >
  <button  id="rock">rock</button>
  <button  id="paper">paper</button>
  <button  id="scissors">scissors</button>
</div>

<div >
  <div id="winner"></div>
</div>

CodePudding user response：

There seems to be a problem in the addEventListener() callbacks, you are playing the game twice.

playRound();
let winner = playRound();

Remove one function call.

CodePudding user response：

Any time a function is read with Parentheses in your code, it calls the function.

playRound();
let winner = playRound();

So what's happening is the first time you call playRound(), it executes the function, but the returned value never gets stored. Within that function, it is rolling your random number, and adding score to the player, or the computer.

After that, the winner variable is declared, runs the function a second time, the function rolls and adds to the score again, and then your winner variable gets stored.

Hope this helps, this is my first time answering on SO. So if anyone has feedback, let me know.