two values do not increment on action as supposed

Question

I have created a rock-paper-scissors game using html,css and js. All the functions and the elements are created in js. So whenever I'm pressing rock it increments playerScore and when i press paper it increments computerscore. Scissor doesn't increment any of them. I checked the functions but i see nothing wrong. Anyone that could tell why is this happening?

let computerScore = 0;
let playerScore = 0;

// ----- computer play & rand int  ------//
function getRndInteger(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function computerPlay() {
  const x = getRndInteger(1, 3);
  if (x === 1) {
    return "rock";
  } else if (x === 2) {
    return "paper";
  } else {
    return "scissors";
  }
}
const computerChoice = computerPlay();

function playRound(computerChoice, playerChoice) {
  if (computerChoice == "rock" && playerChoice == "scissors") {
    return 1;
  } else if (computerChoice == "scissors" && playerChoice == "paper") {
    return 1;
  } else if (computerChoice == "paper" && playerChoice == "rock") {
    return 1;
  } else if (playerChoice == "rock" && computerChoice == "scissors") {
    return 0;
  } else if (playerChoice == "scissors" && computerChoice == "paper") {
    return 0;
  } else if (playerChoice == "paper" && computerChoice == "rock") {
    return 0;
  } else {
    return 2;
  }
}

//---- player and computer decisions ----//
function chooseRock() {
  playerChoice = "rock";
  if (playRound(computerChoice, 'rock') == 1) {
    computerScore++;
  } else if (playRound(computerChoice, 'rock') == 0) {
    playerScore++;
  } else {
    console.log();
  }
  showscoreboard();
}

function choosePaper() {
  playerChoice = "paper";
  if (playRound(computerChoice, 'paper') == 1) {
    computerScore++;
  } else if (playRound(computerChoice, 'paper') == 0) {
    playerScore++;
  } else {
    console.log();
  }
  showscoreboard();
}

function chooseScissors() {
  playerChoice = "scissors";
  if (playRound(computerChoice, 'scissors') == 1) {
    computerScore++;
  } else if (playRound(computerChoice, 'scissors') == 0) {
    playerScore++;
  } else {
    console.log();
  }
  showscoreboard();
}

// ----------- ADD BUTTONS -----------//
const buttonContainer = document.getElementById('buttonContainer');

let rockBtn = document.createElement('button');
let paperBtn = document.createElement('button');
let scissorsBtn = document.createElement('button');
let scoreboard = document.createElement('div');

rockBtn.addEventListener('click', e => chooseRock());
paperBtn.addEventListener('click', e => choosePaper());
scissorsBtn.addEventListener('click', e => chooseScissors());

rockBtn.innerHTML = 'rock';
paperBtn.innerHTML = 'paper';
scissorsBtn.innerHTML = 'scissors';

function showscoreboard() {
  if (computerScore == 5) {
    computerScore = 0;
    playerScore = 0;
    scoreboard.innerHTML = 'Computer wins!';
  } else if (playerScore == 5) {
    computerScore = 0;
    playerScore = 0;
    scoreboard.innerHTML = 'Player wins!';
  } else {
    scoreboard.innerHTML = computerScore + ' ' + playerScore;
  }
}
buttonContainer.appendChild(rockBtn).className = 'buttonlist';
buttonContainer.appendChild(paperBtn).className = 'buttonlist';
buttonContainer.appendChild(scissorsBtn).className = 'buttonlist';
buttonContainer.appendChild(scoreboard);

<p class="action"> Choose your action! </p>

<div id="buttonContainer"/>

Answer 1

the problem is the call of your method: const computerChoice = computerPlay(); it's called only once. When loading the page. As long as you don't refresh the page, the value will remain the same.

Here is a solution:

let computerScore = 0;
let playerScore = 0;

// ----- computer play & rand int  ------//
function getRndInteger(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function computerPlay() {
  const x = getRndInteger(1, 3);
  console.log('x: ', x);
  if (x === 1) {
    return "rock";
  } else if (x === 2) {
    return "paper";
  } else {
    return "scissors";
  }
}


function playRound(computerChoice, playerChoice) {
  if (computerChoice == "rock" && playerChoice == "scissors") {
    return 1;
  } else if (computerChoice == "scissors" && playerChoice == "paper") {
    return 1;
  } else if (computerChoice == "paper" && playerChoice == "rock") {
    return 1;
  } else if (playerChoice == "rock" && computerChoice == "scissors") {
    return 0;
  } else if (playerChoice == "scissors" && computerChoice == "paper") {
    return 0;
  } else if (playerChoice == "paper" && computerChoice == "rock") {
    return 0;
  } else {
    return 2;
  }
}

//---- player and computer decisions ----//
function chooseRock() {
  playerChoice = "rock";
  let computerChoice = computerPlay();
  if (playRound(computerChoice, 'rock') == 1) {
    computerScore++;
  } else if (playRound(computerChoice, 'rock') == 0) {
    playerScore++;
  } else {
    console.log();
  }
  showscoreboard();
}

function choosePaper() {
  playerChoice = "paper";
  let computerChoice = computerPlay();
  if (playRound(computerChoice, 'paper') == 1) {
    computerScore++;
  } else if (playRound(computerChoice, 'paper') == 0) {
    playerScore++;
  } else {
    console.log();
  }
  showscoreboard();
}

function chooseScissors() {
  playerChoice = "scissors";
  let computerChoice = computerPlay();
  if (playRound(computerChoice, 'scissors') == 1) {
    computerScore++;
  } else if (playRound(computerChoice, 'scissors') == 0) {
    playerScore++;
  } else {
    console.log();
  }
  showscoreboard();
}

// ----------- ADD BUTTONS -----------//
const buttonContainer = document.getElementById('buttonContainer');

let rockBtn = document.createElement('button');
let paperBtn = document.createElement('button');
let scissorsBtn = document.createElement('button');
let scoreboard = document.createElement('div');

rockBtn.addEventListener('click', e => chooseRock());
paperBtn.addEventListener('click', e => choosePaper());
scissorsBtn.addEventListener('click', e => chooseScissors());

rockBtn.innerHTML = 'rock';
paperBtn.innerHTML = 'paper';
scissorsBtn.innerHTML = 'scissors';

function showscoreboard() {
  if (computerScore == 5) {
    computerScore = 0;
    playerScore = 0;
    scoreboard.innerHTML = 'Computer wins!';
  } else if (playerScore == 5) {
    computerScore = 0;
    playerScore = 0;
    scoreboard.innerHTML = 'Player wins!';
  } else {
    scoreboard.innerHTML = computerScore + ' ' + playerScore;
  }
}
buttonContainer.appendChild(rockBtn).className = 'buttonlist';
buttonContainer.appendChild(paperBtn).className = 'buttonlist';
buttonContainer.appendChild(scissorsBtn).className = 'buttonlist';
buttonContainer.appendChild(scoreboard);

<p class="action"> Choose your action! </p>

<div id="buttonContainer"/>