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

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 >
  <div >
    <div >
      <span>:</span>
    </div>

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

CodePudding user response：

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 >
  <div >
    <div >
      <span>:</span>
    </div>

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

CodePudding user response：

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;

CodePudding user response：

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