Javascript Counters Not Working

Question

Going through the rounds making a somewhat simple rock paper scissors game in Javascript. The game functions correctly, but none of my counters are working. I want to count up the number of wins/losses/ties and also count down from 10 for amount of rounds played (I'll add a loop later that ends the game when the counter reaches zero). I've moved these counters in and out of functions, moved them around in if/else statements and I'm finally at the point where I just need someone to tell me where to put them or what to do, because nothing seems to be working.

The code is messy, I know it and I'm sorry, I made the mistake of tweaking and retweaking and moving things around and not saving my original. I know I have the counters in multiple places, I can't get them to work no matter where I put them though, so I just left them in both functions for now. If anyone could just help me get the counters working (or at least one of them and then explain what I'm doing wrong with the rest) I would really appreciate it. Thanks!

Here is the JSFiddle: http://jsfiddle.net/nbxk4ofo/1/ (thanks for the tip!) Here's all the relevant code:

HTML

<div id="gameScreen">
 <img src="image/logo.png" />
 <br />
 <hr />
 <h3>You will play 10 rounds against the computer and I'll keep score!<br /><br />
 Wins: <span id="wins">0</span>
 <br />
 Losses: <span id="losses">0</span>
 <br />
 Ties: <span id="ties">0</span>
 <br />
 <br />
 Current Game: <br /><br />
 <span id="whoWon">
 </span> 
 <br /><br />
 You've got
 <span id="triesLeft"></span>
 tries left!
 <br />
 <br />
 <br />
 Select your weapon!<br /><br />
 <img src="image/rock1.jpg" name="rock" onclick ="playGame('rock');" onmouseover="over(0)" onmouseout="out(0)">
 <img src="image/paper1.jpg" name="paper" onclick ="playGame('paper');" onmouseover="over(1)" onmouseout="out(1)">
 <img src="image/scissors1.jpg" name="scissors" onclick ="playGame('scissors');" onmouseover="over(2)" onmouseout="out(2)">
 </h3> 

Javascript

var revert = new Array();
var inames = new Array('rock', 'paper', 'scissors');
var userOption = "";
var triesLeft = 10;
var wins = 0;
var ties = 0;
var losses = 0;
var results;
var computerSelection;
//Main function for the game logic
function playGame(userSelect)
{
userOption = userSelect;
var computerSelection = Math.random();
if (computerSelection < 0.34)
{
 computerSelection = "rock";
}
else if (computerSelection < 0.67)
{
 computerSelection = "paper";
}
else
{
 computerSelection = "scissors";
}
results = compareChoices(userOption, computerSelection);
document.getElementById("result").innerHTML = "<p>The computer chose " +
 computerSelection;
document.getElementById("whoWon").innerHTML = results;
document.getElementById("triesLeft").innerHTML = triesLeft;
}
function updateScore(results) {
var ties = document.getElementById("ties");
var wins = document.getElementById("wins");
var losses = document.getElementById("losses");
if (results === "tie") {
 ties++;
 ties.innerHTML = ties;
}
if (results === "win") {
 wins++;
 wins.innerHTML = wins;
}
if (results === "lose") {
 losses++;
 losses.innerHTML = losses;
}
}
function compareChoices(userOption, computerSelection)
{
if (computerSelection == "rock") {
 document.getElementById("imageResult").setAttribute("src", "image/rock2.jpg");
}
if (computerSelection == "paper") {
 document.getElementById("imageResult").setAttribute("src", "image/paper2.jpg");
}
if (computerSelection == "scissors") {
 document.getElementById("imageResult").setAttribute("src", "image/scissors2.jpg");
}
if (userOption == computerSelection)
{
 ties++;
 updateScore("tie")
 return "It's a tie!";
}
if (userOption == "rock")
{
 if (computerSelection == "scissors")
 {
 wins++;
 updateScore("win")
 return "You win!";
 }
 else
 {
 losses++;
 updateScore("lose")
 return "You lose!";
 }
} else if (userOption == "paper") {
 if (computerSelection == "rock")
 {
 wins++;
 updateScore("win")
 return "You win!";
 } else if ("scissors") {
 updateScore("lose")
 losses++;
 return "You lose!";
 }
} else if (userOption == "scissors") {
 if (computerSelection == "rock")
 {
 losses++;
 updateScore("lose")
 return "You lose!";
 }else{
 wins++;
 updateScore("win")
 return "You win!";
 }
}
} 

• Ian: document.getElementById("ties") retrieves an HTML element. You can't increment that. Use different variables for different things
• bnr32jason: @Ian okay, so the whole function is the problem then. How would you remedy it? I pulled that from another example that did have a working counter and tried to integrate it with mine, but obviously I failed.
• bnr32jason: @Ian perhaps you could just show me how you would fix "ties" and then I can use that information to hopefully fix the rest?
• Ian: For what you have, you might as well get the current value, increment it and store it back: document.getElementById("ties").innerHTML = Number(document.getElementById("ties").innerHTML) + 1;
• Chad Chabot: I pasted your code to JSFiddle to make it easier for you and others to comment on and contribute. jsfiddle.net/nbxk4ofo/1 I highly recommend using jsfiddle or a similar service (Codepen.io) when you're wanting to share bits like this.

Answer 1

In updateScore() you are defining variables ties, wins and losses as HTML node elements. Since these variables are called the same as your counters in the global context, you can't access the counters from updateScore(), since the inner context has precedence over the outer one.

Moreover, since you try to use wins first as a number and then as an object, nothing gets really done:

if (results === "win") {
 wins++; // treat inner wins as a Number, becomes NaN
 wins.innerHTML = wins; // treat NaN wins as an Object, result undefined
}

And the same happens with the other counters.

Once you fix this with the code below, you will notice that counters increase by 2 units each time. This is because you also increase counters on compareChoices, so my solution is not to try increase counters in updateScore:

function updateScore(results) {
 if (results === "tie") {
 document.getElementById("ties").innerHTML = ties;
 }
 if (results === "win") {
 document.getElementById("wins").innerHTML = wins;
 }
 if (results === "lose") {
 document.getElementById("losses").innerHTML = losses; 
 }
}

You also need to update triesLeft, which you can do in playGame's last line:

document.getElementById("triesLeft").innerHTML = --triesLeft;

And you can prevent the player from playing there are no more tries left:

function playGame(userSelect) {
 if (triesLeft == 0) {
 alert("No more tries left!");
 return;
 } 
 // The rest of the function...
}

That should do it.

Answer 2

Change some code and make the flow works.

1. Add <span id="result"></span><img id="imageResult"/> So Computer's choice can display.
2. Use a status object to save all the values that will change by time, so we can reduce some dulplicate code and use result as object's key to get value.
3. Let compareChoice simply just compare choice, so I move the action of set compute result image to playgame.

revert = new Array();
var inames = ['rock', 'paper', 'scissors'];
var gameStatus = {
 wins: 0,
 ties: 0,
 losses: 0,
 triesLeft: 10
};
// 
var imageResults = {
 paper: 'image/paper.jpg',
 scissors: "image/scissors.jpg",
 rock: 'image/rock2.jpg'
};
//Main function for the game logic
function playGame(userSelect) {
 if (gameStatus.triesLeft > 0) {
 --gameStatus.triesLeft;
 // Get int value in range [0, 2]
 var computerSelection = Math.floor(Math.random() * 3);
 computerSelection = inames[computerSelection];
 // Move the show Image from compareChoices to here.
 document.getElementById("imageResult").setAttribute("src", imageResults[computerSelection]);
 var results = compareChoices(userSelect, computerSelection);
 document.getElementById("result").innerHTML = "<p>The computer chose " + computerSelection;
 document.getElementById("whoWon").innerHTML = results;
 document.getElementById("triesLeft").innerHTML = gameStatus.triesLeft;
 }
}
function updateScore(results) {
 ++gameStatus[results]
 var resultTarget = document.getElementById(results);
 resultTarget.innerHTML = gameStatus[results].toString();
}
function compareChoices(userOption, computerSelection) {
 if (userOption === computerSelection) {
 ties++;
 updateScore("ties");
 return "It's a tie!";
 }
 var result;
 var resultStr;
 if (userOption === "rock") {
 if (computerSelection === "scissors") {
 result = 'wins';
 resultStr = 'You win';
 } else {
 result = 'losses';
 resultStr = 'You lose!';
 } 
 } else if (userOption === "paper") {
 if (computerSelection === "rock") {
 result = 'wins';
 resultStr = 'You win';
 } else if ("scissors") {
 result = 'losses';
 resultStr = 'You lose!';
 }
 } else if (userOption === "scissors") {
 if (computerSelection === "rock") {
 result = 'losses';
 resultStr = 'You lose!';
 } else {
 result = 'wins';
 resultStr = 'You win';
 }
 }
 updateScore(result);
 return 'You ' + result + '!';
}

<div id="gameScreen">
 <img src="image/logo.png" />
 <br />
 <hr />
 <h3>You will play 10 rounds against the computer and I'll keep score!<br /><br />
 Wins: <span id="wins">0</span>
 <br />
 Losses: <span id="losses">0</span>
 <br />
 Ties: <span id="ties">0</span>
 <br />
 <br />
 Current Game: <br /><br />
 <span id="whoWon">
 </span> 
 <br /><br />
 You've got
 <span id="triesLeft"></span>
 tries left!
 <br />
 <br />
 <br />
 Select your weapon!<br /><br />
 <img src="image/rock1.jpg" name="rock" onclick ="playGame('rock');" onmouseover="over(0)" onmouseout="out(0)">
 <img src="image/paper1.jpg" name="paper" onclick ="playGame('paper');" onmouseover="over(1)" onmouseout="out(1)">
 <img src="image/scissors1.jpg" name="scissors" onclick ="playGame('scissors');" onmouseover="over(2)" onmouseout="out(2)">
 <br/>
 <span id="result"></span>
 <img id="imageResult"/>
 </h3>