How do I make my scores work in a game of scissors, paper stone?

Question

I am new to javascript and html. I am trying to make a scissors, paper stone game that the player plays against the computer. However I am not able to get the score to play or get the score to display in html. I have tried adding a rendering function too but doesn't work. What is wrong with my scoreWindow code? Why does it show as error and null? Please help.

let choises = ['rock', 'paper', 'scissors'];

choises.rock = document.querySelector('.rock');
choises.paper = document.querySelector('.paper');
choises.scissors = document.querySelector('.scissors');

/*let userScore = document.querySelector('.scores .scorePlayer');
let computerScore = document.querySelector('.scores .scoreComp');*/
let scoreWindow = document.querySelector('.scores');
let playerSelection;
let computerSelection;

let computerScore = 0;
let userScore = 0;

scoreWindow.innerHTML = userScore + ' : ' + computerScore;

function computerPlay() {
  let computerAction = Math.floor(Math.random() * choises.length);
  computerSelection = choises[computerAction];
  return computerSelection;
}


function playRound(playerSelection, computerSelection) {
  if (playerSelection === computerSelection) {
    userScore = userScore + 1;
    computerScore = computerScore + 1;
  } else if ((playerSelection === choises.rock && computerSelection === choises.scissors) ||
    (playerSelection === choises.rock && computerSelection === choises.rock) ||
    (playerSelection === choises.scissors && computerSelection === choises.paper)) {
    userScore = userScore++;
  } else {
    computerScore = computerScore++;
  }

  scoreWindow.innerHTML = userScore + ' : ' + computerScore;
  return (computerScore, userScore);
}

function doChoises() {
  choises.rock.addEventListener('click', () => {
    playerSelection = choises[0];
    console.log(computerPlay());
    console.log(playerSelection);
    console.log(playRound(playerSelection, computerSelection));
  });
  choises.paper.addEventListener('click', () => {
    playerSelection = choises[1];
    console.log(computerPlay());
    playRound();
  });
  choises.scissors.addEventListener('click', () => {
    playerSelection = choises[2];
    console.log(computerPlay());
    playRound();
  });
}

function renderScore(computerScore, userScore) {
  scoreWindow.innerText = `${computerScore} : ${userScore}`;
}
renderScore();
doChoises();

<div class="battlefield">
  <div class="battlefield__back">
    <div class="scores">
      <span>:</span>
    </div>

    <div class="battlefield__weapon">
      <button class="rock">
                <img src="./rock.png"/>
            </button>
      <button class="paper">
                <img src="./paper.png"/>
            </button>
      <button class="scissors">
                <img src="./scissors.png"/>
            </button>
    </div>
  </div>
</div>

Answer 1

You need to make the following 3 changes to make the score work correctly. I just tried it and the rest of your game code works fine once you make the changes. It is not a script loading problem as some answers suggest.

(1) Remove the parameters from function playRound because you want the function to use the global variables. The problem with this might not be obvious. Yet, these parameters are overriding the global values with the same name. And they are always both null and so the logic for determining the score doesn't work correctly.

    // function playRound(playerSelection, computerSelection) {
    function playRound() {

(2 & 3) Increment the user and computer scores correctly.

    //userScore = userScore++;
    userScore++;


    //computerScore = computerScore++;
    computerScore++;

let choises = ['rock', 'paper', 'scissors'];

choises.rock = document.querySelector('.rock');
choises.paper = document.querySelector('.paper');
choises.scissors = document.querySelector('.scissors');

/*let userScore = document.querySelector('.scores .scorePlayer');
let computerScore = document.querySelector('.scores .scoreComp');*/
let scoreWindow = document.querySelector('.scores');
let playerSelection;
let computerSelection;

let computerScore = 0;
let userScore = 0;

scoreWindow.innerHTML = userScore + ' : ' + computerScore;

function computerPlay() {
  let computerAction = Math.floor(Math.random() * choises.length);
  computerSelection = choises[computerAction];
  return computerSelection;
}


function playRound() {
  if (playerSelection === computerSelection) {
    userScore++;
    computerScore++;
  } else if ((playerSelection === choises.rock && computerSelection === choises.scissors) ||
    (playerSelection === choises.rock && computerSelection === choises.rock) ||
    (playerSelection === choises.scissors && computerSelection === choises.paper)) {
    userScore++;
  } else {
    computerScore++;
  }

  scoreWindow.innerHTML = userScore + ' : ' + computerScore;
  return (computerScore, userScore);
}

function doChoises() {
  choises.rock.addEventListener('click', () => {
    playerSelection = choises[0];
    console.log(computerPlay());
    console.log(playerSelection);
    console.log(playRound(playerSelection, computerSelection));
  });
  choises.paper.addEventListener('click', () => {
    playerSelection = choises[1];
    console.log(computerPlay());
    playRound();
  });
  choises.scissors.addEventListener('click', () => {
    playerSelection = choises[2];
    console.log(computerPlay());
    playRound();
  });
}

function renderScore(computerScore, userScore) {
  scoreWindow.innerText = `${computerScore} : ${userScore}`;
}
renderScore();
doChoises();

<div class="battlefield">
  <div class="battlefield__back">
    <div class="scores">
      <span>:</span>
    </div>

    <div class="battlefield__weapon">
      <button class="rock">
                <img alt="rock" src="./rock.png"/>
            </button>
      <button class="paper">
                <img alt="paper" src="./paper.png"/>
            </button>
      <button class="scissors">
                <img alt="scissors" src="./scissors.png"/>
            </button>
    </div>
  </div>
</div>

Answer 2

Before doing any operations on the DOM, you must wait for it to render. With the current code, you are trying to look for elements in a potentially empty page.

Use document.onload with a function wrapping all of your code.

function main() {
  /* the eternity of the code */
}
document.onload = main;

Answer 3

For queryselectors to work properly add a defer attribute to your script tag

For example

<script src='script.js' defer ></script>

This should fix your problem

Answer 4

Here is a condensed way of handling the game:

const choices="rock,paper,scissors".split(","),
 btns=document.querySelectorAll("#user button");
var cmp,usr;

btns.forEach(b=>b.onclick=()=>{
 usr=choices.findIndex(c=>b.classList.contains(c));
 btns.forEach(c=>c.classList.toggle("active",b==c));
 computer.className=choices[cmp=Math.floor(Math.random()*3)];
 switch((3+cmp-usr)%3){ // possible results: 0,1,2
  case 1: cs.textContent++; break;
  case 2: us.textContent++;
 }
})

button {background:url(https://previews.123rf.com/images/sudowoodo/sudowoodo1710/sudowoodo171000028/88077066-hand-gestures-for-rock-paper-scissors-game-simple-hand-icons-.jpg); width:32px; height:36px; background-size:96px; display:inline-block}
.rock  {background-position:-4px -32px}
.paper {background-position:-34px -32px}
.scissors {background-position:-64px -32px}
.active {border-color:#f00;}

<div class="battlefield">
Computer: <span id="cs">0</span><br>
 <button id="computer"></button>
 <div id="user">
 User: <span id="us">0</span><br>
   <button class="rock"></button>
   <button class="paper"></button>
   <button class="scissors"></button>
 </div>
</div>

As brevity and avoiding redundancies was my main focus here I used the form of addressing DOM elements directly as variables in the global scope (computer, cs and us). The more conventional way would have been to "get" them through something like: const computer=document.getElementById("computer").