How to keep track of Player vs Computer scores

Question

I am trying to complete my first coding challenge as i am very new to coding, and i have to admit i am struggling with showing a scorecard that keeps track of the player vs computer score over x amount of games played.

I have attempted all kinds of ways to do this including loops, and multiple functions, I feel I have been on this for far too long and obviously need help as my efforts are in vein as i can not increase the scores each time a player or computer wins.

I have gone back to basics and showing you the code below, at the moment the score only goes to a maximum number of 1 for both player and computer and does not continue increasing after that for each win made.

Can you help?

//Global Variabes.
var playerCard = 0;
var computerCard = 0;

for (var i = 0; i < document.querySelectorAll("button").length; i++) {

document.querySelectorAll("button")[i].addEventListener("click", function() {

var playerChoice = (this.innerHTML);
var random = Math.floor(Math.random() * 
document.querySelectorAll("button").length);
var choices = ["Rock", "Paper", "Scissors"];
var compChoice = choices[random];


document.querySelector(".scoreCard").style.display = "block";
document.querySelector(".player").innerHTML = playerChoice;// view players choice.    
document.querySelector(".computer").innerHTML = compChoice;// view computers choice.

if (playerChoice === "Rock" && compChoice === "Scissors") {
  document.querySelector(".result").innerHTML = "Player Wins.";
} else if (playerChoice === "Scissors" && compChoice === "Paper") {
  document.querySelector(".result").innerHTML = "Player Wins.";
} else if (playerChoice === "Paper" && compChoice === "Rock") {
  document.querySelector(".result").innerHTML = "Player Wins.";
} else if (playerChoice === "Scissors" && compChoice === "Rock") {
  document.querySelector(".result").innerHTML = "Computer Wins.";;
} else if (playerChoice === "Paper" && compChoice === "Scissors") {
  document.querySelector(".result").innerHTML = "Computer Wins.";;
} else if (playerChoice === "Rock" && compChoice === "Paper") {
  document.querySelector(".result").innerHTML = "Computer Wins.";;
} else if (playerChoice === compChoice) {
  document.querySelector(".result").innerHTML = "It's a draw";
}

function trackPlayerScore() {

 if (document.querySelector(".result").firstChild.wholeText === "Player Wins.") {
    document.querySelector(".pRecord").innerHTML = playerCard+1;
 } else if (document.querySelector(".result").firstChild.wholeText === "Computer Wins.")  {
     document.querySelector(".cRecord").innerHTML = computerCard+1;}
}//end of trackPlayerScore function.
trackPlayerScore()
})// end of anonymous function.
}// end of initial loop..

A variable that is declared inside a function only exists as long as the function runs. You need to move your `var playerScore = 0;` lines outside any function. This is a crucial element of programming called [scope](https://developer.mozilla.org/en-US/docs/Glossary/Scope). — , Apr 23 '21 at 06:17
Duplicate: [Variable keeps getting reset to its original value](https://stackoverflow.com/questions/27589450/variable-keeps-getting-reset-to-its-original-value) — , Apr 23 '21 at 06:19
Hi Chris, thanks for your feedback, i have also read the duplicate question, but the results are still the sane regardless of where i place my variables. i have placed them outside the function and the scores still only reach a maximus value of 1. May i update my question to show you the entire code? its 41 lines and might give you a better idea of what's wrong? ignore al the DOM manipulation as that is working perfectly. — nezza1, Apr 23 '21 at 06:41
Looking more closely at your code it seems like you're a) relying on .wholeText to determine who won the game; that seems weird because you're setting that very text yourself, so at that point you already know what happened and can use that to update the score b) never actually increasing the score; you have to increase the value by one, then set it as .innerHTML. `playerScore+1` doesn't change the variable, it's an expression that evaluates to 0+1 i.e. 1. — , Apr 23 '21 at 06:54
Chris, honestly you are a legend, i know this must be easy for you but i have been going around in circles trying to figures this out as i am very new tot it, I've just come off my course for a while to get some repetition in and do these challenges in the hopes to solidify what i have learned for some reason this scorecard made me feel like packing my bags lol. i have updated the code to include the variables incrementing by 1 first before targeting the innerHTML and it has finally WORKED! thankyou so much, big lesson learned. — nezza1, Apr 23 '21 at 07:08
Here's my version, for learning purposes :) https://jsfiddle.net/yudr8Lhs/ — , Apr 23 '21 at 07:18

score 2 · Answer 1 · edited Aug 02 '21 at 20:53

2

Your requirement to keep track of score can be achieved by having two separate counters.

Assuming the following HTML

<div id="score_board">
  <h2 id="player_score">Player = 0</h2>
  <h2 id="computer_score">Computer = 0</h2>
</div>
<button id="player_wins">Player wins</button>
<button id="computer_wins">Computer Wins</button>

This can be done as follows

// Counter for score.
let player_score = 0;
let computer_score = 0;

// Increment counter for player when condition is satisfied.
document.getElementById("player_wins").addEventListener("click", function () {
  player_score++;   // <-- Update counter variable
  document.getElementById(
    "player_score"
  ).innerText = `Player = ${player_score}`;
});

// Increment counter for computer when condition is satisfied.
document.getElementById("computer_wins").addEventListener("click", function () {
  computer_score++;   // <-- Update counter variable
  document.getElementById(
    "computer_score"
  ).innerText = `Computer = ${computer_score}`;
});

This is the basic idea. The counter cannot be inside the callback as with each call it will reset.

edited Aug 02 '21 at 20:53

marc_s

732,580
175
1,330
1,459

answered Apr 23 '21 at 06:39

Darshna Rekha

1,069
7
20

Hi Darshna, i feel i have already done this but i have pasted the whole code in my question and updated to show you. – nezza1 Apr 23 '21 at 06:58
`playerCard+1` will not modify the variable. Hence it will remain `0`. You need to update the variable and then write to the `innerText` or `innerHTML`. – Darshna Rekha Apr 23 '21 at 07:01
Try `playerCard = playerCard+1; document.querySelector(".pRecord").innerHTML = playerCard;`, it should work. – Darshna Rekha Apr 23 '21 at 07:04
1

Brilliant, this also works, thankyou very much also i like how you can keep it all as one line using semi-colon between the variable info and the DOM manipulation. – nezza1 Apr 23 '21 at 07:49

score 0 · Accepted Answer · answered Apr 23 '21 at 07:14

Chris my edited version after your response:

 function trackPlayerScore() {

 if (document.querySelector(".result").innerHTML === "Player Wins.") {
 playerCard++
 document.querySelector(".pRecord").innerHTML = playerCard;
 } else if (document.querySelector(".result").innerHTML === "Computer Wins.")  {
 computerCard++
 document.querySelector(".cRecord").innerHTML = computerCard;}
 }//end of trackPlayerScore function.
 trackPlayerScore()
 })// end of anonymous function.
 }// end of initial loop..

How to keep track of Player vs Computer scores

2 Answers2