Whenever I run the code , computer-Point has score 1 before the game started . Second issue that I couldn't figure out is that how to set a play round for 5 set. these are the JavaScript code

1. describe the values
2. set computer choices
3. set check-winner Function
4. set Player choices
5. set game function

````
var playerPoint = 0;
var computerPoint = 0;
const userScore_p = document.querySelector(".human > p");
const computerScore_p = document.querySelector(".machine > p");
const result_p = document.querySelector('.result > p');
const rock = document.getElementById('rock')
const paper = document.getElementById('paper');
const scissors = document.getElementById('scissors');
const playerSelection = [rock, paper, scissors]


const weapons = ["rock", "paper", "scissors"];
// set the computer random choice
function getComputerChoice(){
    const choice = weapons[Math.floor(Math.random() * weapons.length)];
    return choice;
}

function checkWinner(playerSelection) {
       const computerSelection = getComputerChoice(); 
       if (playerSelection == computerSelection) {
        result_p.textContent = "Tie";
       
    } 
     else if ((playerSelection == "rock" && computerSelection == "scissors") ||
              (playerSelection == "scissors" && computerSelection == "paper") ||
              (playerSelection == "paper" && computerSelection == "rock")) {
                 result_p.textContent = "player Winnnn";
                 playerPoint  ;
                 userScore_p.innerHTML = playerPoint;
    } else {
                result_p.textContent = "Player lost!!!!";
                computerPoint  ;   
                computerScore_p.innerHTML = computerPoint;
    }
    console.log(computerSelection)
    console.log(playerSelection);
}

function getPlayerChoice() {
    rock.addEventListener("click", function () {
     checkWinner("rock");
    });
    paper.addEventListener("click", function() {
         checkWinner("paper");
    });
    scissors.addEventListener("click", function() {
        checkWinner("scissors")
    });
    
}

function game() {
    const computerSelection = getComputerChoice();

    for (let i = 0; i < 5; i  ) {
        if (playerPoint > computerPoint) {
        result_p.innerHTML = "you won the game"
      } else if (playerPoint < computerPoint) {
        result_p.innerHTML = "you lose the game"
      } else {
        result_p.innerHTML = "Drawwww"
      }
   }
}

game()
checkWinner();
getPlayerChoice();
    ````
    

CodePudding user response：

The problem here is, player is not going to choose a weapon until they click on 1 of the 3 buttons, so when you call the function getPlayerChoice() it actually doesn't mean the player clicked on one of those buttons.

You should process the logics inside the checkWinner() function, which is called whenever the user clicks on a button.

let playerPoint = 0;
let computerPoint = 0;

const userScore_p = document.querySelector(".human > p");
const computerScore_p = document.querySelector(".machine > p");
const result_p = document.querySelector('.result > p');
const rock = document.getElementById('rock')
const paper = document.getElementById('paper');
const scissors = document.getElementById('scissors');
const playerSelection = [rock, paper, scissors]

rock.addEventListener("click", function() {
  checkWinner("rock");
});

paper.addEventListener("click", function() {
  checkWinner("paper");
});

scissors.addEventListener("click", function() {
  checkWinner("scissors")
});

const weapons = ["rock", "paper", "scissors"];

// set the computer random choice
function getComputerChoice() {
  const choice = weapons[Math.floor(Math.random() * weapons.length)];
  return choice;
}

function checkWinner(playerSelection) {

  const computerSelection = getComputerChoice();

  if (playerSelection == computerSelection) {
    result_p.textContent = "Tie";

  } else if ((playerSelection == "rock" && computerSelection == "scissors") ||
    (playerSelection == "scissors" && computerSelection == "paper") ||
    (playerSelection == "paper" && computerSelection == "rock")) {
    result_p.textContent = "player Winnnn";
    playerPoint  ;
    userScore_p.innerHTML = playerPoint;
  } else {
    result_p.textContent = "Player lost!!!!";
    computerPoint  ;
    computerScore_p.innerHTML = computerPoint;
  }
  console.log(computerSelection)
  console.log(playerSelection);
}

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

<div>
  HUMAN
  <div >
    <p>0</p>
  </div>
</div>

<div>
  MACHINE
  <div >
    <p>0</p>
  </div>
</div>

<div>
  RESULT
  <div >
    <p></p>
  </div>
</div>