Outputting results based upon button 'addEventListener' not working ++

Question

I am building the rock paper scissors game. I am not done but can't seem to figure out how to output the scores of when the computer wins vs when the player wins.

The player can click three buttons, rock, paper, or scissors. The computer is using math.random to pick from an array. When the button is clicked like 'rock' for example, it takes the playerChoice (from the button clicked) and activates the versus() function. The versus function then activates the playRound.

If the player loses in playRound() it activates playerLost() function which is supposed to output the computer score by 1.

If the computer does not win the else statement in playRound() is supposed to increase playerScore by 1.

I created a variable using getElementByID and targeted the elements for the outputs which you can see at the top. The variables are 'PlayerScore' and 'computerScore'.

I am obviously doing something wrong in the 'computerScore++' and 'playerScore++' as it is not outputting anything. After I get this fixed I can move on to finishing the project.

let playerScore = 0;
let computerScore = 0;
const rock = document.getElementById("submitRock");
const paper = document.getElementById("submitPaper");
const scissors = document.getElementById("submitScissors");
const choices = ["rock", "paper", "scissors"];
playerScore = document.getElementById("ps").innerText;
computerScore = document.getElementById("cs").innerText;
// document.getElementById("ps").textContent = playerScore;
// document.getElementById("cs").textContent = computerScore;

function computerChoice() {
  let mathRandom = Math.floor(Math.random() * 3);
  let computerChoice = choices[mathRandom];
  return computerChoice;
}

function playerLost() {
  document.getElementById(
    "cs"
  ).innerText = `You lost! ${computerChoice} beat your choice!`;
  computerScore++;
}

rock.addEventListener("click", function () {
  playerChoice = choices[0];
  versus();
});

paper.addEventListener("click", function () {
  playerChoice = choices[1];
  versus();
});

scissors.addEventListener("click", function () {
  playerChoice = choices[2];
  versus();
});

function versus() {
  playRound();
}

function playRound(computerChoice) {
  if (computerChoice === choices[0] && playerChoice === [2]) {
    return playerLost();
  } else if (computerChoice === choices[1] && playerChoice === [0]) {
    playerLost();
  } else if (computerChoice === choices[2] && playerChoice === [1]) {
    playerLost();
  } else if (computerChoice === playerChoice) {
    document.getElementById(
      "scoreboard"
    ).textContent = `DUDE!!! That is a draw! The computer picked ${computerChoice} and you picked ${playerChoice}`;
  } else
    document.getElementById(
      "scoreboard"
    ).textContent = `You win! You picked ${playerChoice} and the computer picked ${computerChoice}.`;
  playerScore++;
}

HTML

<h1 class="title">Welcome to Rock, Paper, Scissors!</h1>
<h2 class="title-sub">Against the computer....</h2>

<h1 id="scoreboard"></h1>

<div id="scoreContainer">
  <div id="playerScore">
    <h3 class="playersTitle playerColor">Player</h3>
    <p id="ps"></p>
  </div>
  <div id="computerScore">
    <h3 class="playersTitle computerColor">Computer</h3>
    <p id="cs"></p>
  </div>
</div>

<div id="options">
  <div id="rock">
    <button id="submitRock">ROCK</button>
  </div>
  <div id="paper">
    <button id="submitPaper">PAPER</button>
  </div>
  <div id="scissors">
    <button id="submitScissors">SCISSORS</button>
  </div>
</div>

<p id="winner"></p>

Answer 1

Now that you have a solution, here's a different way to structure your code.

let
  playerScore = 0,
  computerScore = 0;

const
  ROCK ='ROCK',
  PAPER = 'PAPER',
  SCISSORS = 'SCISSORS',
  choices = [ROCK, PAPER, SCISSORS],
  getById = (id) => document.getElementById(id),

  optionsDiv = getById('options'),
  rockBtn = getById('rockBtn'),
  paperBtn = getById('paperBtn'),
  scissorsBtn = getById('scissorsBtn'),

  scoreboard = getById('scoreboard'),
  playerScoreDisplay = getById('psDisplay'),
  computerScoreDisplay = getById('csDisplay');

updateScoreDisplay(); // Initializes display

// Adds a listener on the container div -- a click triggers `playerChoiceSubmitted`
options.addEventListener('click', playerChoiceSubmitted);

function playerChoiceSubmitted(event) {
  // Listener can automatically access triggering event (which has a target property)
  const clicked = event.target;
  if(!clicked.classList.contains("option")){ return; } // Ignores irrelevant clicks
  let playerChoice;
  if     (clicked.id === "rockBtn")    { playerChoice = ROCK; }
  else if(clicked.id === "paperBtn")   { playerChoice = PAPER; }
  else if(clicked.id === "scissorsBtn"){ playerChoice = SCISSORS; }
  playRound(playerChoice, getComputerChoice()); // Gets comp choice, then starts round
};

function getComputerChoice() {
  const mathRandom = Math.floor(Math.random() * 3);
  const computerChoice = choices[mathRandom];
  return computerChoice;
}

function playRound(pChoice, cChoice){
  if (
       cChoice === ROCK     && pChoice === SCISSORS  
    || cChoice === SCISSORS && pChoice === PAPER 
    || cChoice === PAPER    && pChoice === ROCK
  ){                                             // Player loses
    scoreboard.textContent = getLoseText(cChoice, pChoice);
    computerScore++;
  }
  else if (cChoice === pChoice) {                        // Draw
    scoreboard.textContent = getDrawText(cChoice, pChoice);
  }
  else {                                          // Player wins
    scoreboard.textContent = getWinText(cChoice, pChoice);
    playerScore++;
  };
  updateScoreDisplay(); // Updates visible scores no matter who won
}

function updateScoreDisplay(){
  playerScoreDisplay.textContent = playerScore;
  computerScoreDisplay.textContent = computerScore;
}

function getDrawText(computerChoice, playerChoice){
  return `DUDE!!! That is a draw! The computer picked ${computerChoice} and you picked ${playerChoice}`;
}
function getWinText(computerChoice, playerChoice){
  return `You win! You picked ${playerChoice} and the computer picked ${computerChoice}.`;
}
function getLoseText(computerChoice, playerChoice){
  return `You lost! ${computerChoice} beat your choice!`;
}

#scores{ font-size: 1.5em; margin-bottom: 0.5em; }

<div id="scores">
    <div>
      <span>Player:</span>
      <span id="psDisplay"></span>
    </div>
    <div>
      <span>Computer:</span>
      <span id="csDisplay"></span>
    </div>
  </div>

  <div id="options">
    <button id="rockBtn" class="option">ROCK</button>
    <button id="paperBtn" class="option">PAPER</button>
    <button id="scissorsBtn" class="option">SCISSORS</button>
  </div>

  <p id="scoreboard"></p>

Answer 2

I fixed your code... commented out the annoying new "const" so I can check my code... Some people will complain that I coded it "for" you - I did it for myself! I hope you learn from this, and you are welcome to ask questions - I would be pleased if you completely understand what I did.

let computerScore = 0;
/*const*/ choices = ["rock", "paper", "scissors"];

/*const*/ rock = document.getElementById("submitRock");
rock.addEventListener("click", function () {
  playRound(choices[0]);
});

/*const*/ paper = document.getElementById("submitPaper");
paper.addEventListener("click", function () {
  playRound(choices[1]);
});

/*const*/ scissors = document.getElementById("submitScissors");
scissors.addEventListener("click", function () {
  playRound(choices[2]);
});

function playRound(playerChoice) {
  let computerChoice=choices[Math.floor(Math.random() * choices.length)];
  if(
    (computerChoice === choices[0] && playerChoice === choices[2]) ||
    (computerChoice === choices[1] && playerChoice === choices[0]) ||
    (computerChoice === choices[2] && playerChoice === choices[1])
  ) {
    document.getElementById(
      "scoreboard"
    ).innerText = `You lost! ${computerChoice} beat your choice - ${playerChoice}!`;
    document.getElementById("cs").innerText=Number(document.getElementById("cs").innerText)+1;
  }
  else if(computerChoice === playerChoice) {
    document.getElementById(
      "scoreboard"
    ).textContent = `DUDE!!! That is a draw! The computer picked ${computerChoice} and you picked ${playerChoice}`;
  }
  else {
    document.getElementById(
      "scoreboard"
    ).textContent = `You win! You picked ${playerChoice} and the computer picked ${computerChoice}.`;
    document.getElementById("ps").innerText=Number(document.getElementById("cs").innerText)+1;
  }
}

I didn't change your HTML, although, I think the scoreboard shouldn't be <h1> = too big.
Also, you could change the message/add computer and player choice divs/spans:
After click:
Player: <say, Rock> Computer: <say, Paper>
Paper beats Rock, you lose.

Answer 3

I think part of the issue is that you're not actually passing an argument into the playRound() function within function versus(). Your function declaration for playRound accepts a parameter named computerChoice, but you never actually pass in computerChoice when you invoke playRound.

And so I'm thinking that when the interpreter actually gets to evaluating your control structures (i.e. the if, else if, and else statements within playRound) the interpreter probably throws some kind of error because computerChoice is undefined (and as such never gets to the part where it would change the text content of the scoreboard div or the cs paragraph).

Also, I'm thinking that, because computerChoice is a function, you're going to have to invoke it by adding open and close parens to it within your playRound function. And also because the computerChoice involves randomness, you'll want to store the returned value to a variable within your playRound function. Otherwise, potentially you'll get a different random choice returned from computerChoice each time the function is evaluated within one of the if/else if/ statements.