Keeping track of wins Rock paper scissors

Question

I was trying to make a rock paper scissors game in Javascript. I have gotten to a point where the code can figure out who wins ,the computer or you.

I am stuck at the following: I can't keep track of how many times I have won and I want the game to end after 5 tries. Then it outputs how many times I have won out of 5 games.

My Javascript code is below:

---

<script type="text/javascript">
    var computerChoice = Math.random();
    if (computerChoice < 0.33) {
        computerChoice = "rock";
    } else if(computerChoice <= 0.66) {
        computerChoice = "paper";
    } else {
        computerChoice = "scissors";
    }
    for(i=1; i<6; i++) {
    var counter =0;
    document.getElementById("box1").onclick= function(){
        if(computerChoice == "rock"){
            alert("It is a tie, You chose Rock, computer chose Rock, Lame!");
        }
        else if(computerChoice =="paper"){
            alert("Sucker, YOU LOST! You chose Rock, COMPUTER OVERLORD chose paper");
        }
        else if(computerChoice=="scissors"){
            alert("DANG! You Beat Computer OVERLORD cuz he chose scissors");
            counter++;
        }
    }
    document.getElementById("box2").onclick= function(){
        if(computerChoice == "paper"){
            alert("It is a tie, You chose Paper, computer chose Paper, Lame!");
        }
        else if(computerChoice =="scissors"){
            alert("Sucker, YOU LOST! You chose Paper, COMPUTER OVERLORD chose scissors");
        }
        else if(computerChoice=="rock"){
            alert("DANG! You Beat Computer OVERLORD cuz he chose rock");
            counter++;
        }
    }
    document.getElementById("box3").onclick= function(){
        if(computerChoice == "scissors"){
            alert("It is a tie, You chose scissors, computer chose scissors, Lame!");
        }
        else if(computerChoice =="rock"){
            alert("Sucker, YOU LOST! You chose scissors, COMPUTER OVERLORD chose rock");
        }
        else if(computerChoice=="paper"){
            alert("DANG! You Beat Computer OVERLORD cuz he chose paper");
            counter++;
        }
    }
    i++;
    return counter;
}
var computerWins = 5-counter;
if (computerWins > counter) {
    console.log("COMPUTER OVERLORD WINS, HE IS YOUR MASTER!");
}
else {
    console.log("Hey computer overlord and you can be friends, just dont tell anyone you lost, k");
}
</script>

Answer 1

This requires some variables (round, human, computer) which have a global scope and live outside of the onClick method's lifecycle. Update these variables accordingly after every onClick event finishes. Note the updateRound method I created to accomplish this.

Given that the function performed in each onClick method is logically equivalent, it is best to extract it to a function to adhere to the programming's Do not Repeat Yourself (DRY) dogma.

There is also another possible logic error in your code. As it sits, the computer's decision will be the same for all 5 games. To update the computer's decision every round, it is necessary to wrap the "computer choice" logic in a function which can be triggered every round.

Here is a more elegant JSFiddle solution

var counter = 0;
var computerChoice = Math.random();
if (computerChoice < 0.33) {
  computerChoice = "rock";
} else if (computerChoice <= 0.66) {
  computerChoice = "paper";
} else {
  computerChoice = "scissors";
}

document.getElementById("box1").onclick = function() {
  var victor = 'COMPUTER OVERLORD';
  if (computerChoice == "rock") {
    victor = 'draw';
    alert("It is a tie, You chose Rock, computer chose Rock, Lame!");
  } else if (computerChoice == "paper") {
    alert("Sucker, YOU LOST! You chose Rock, COMPUTER OVERLORD chose paper");
  } else if (computerChoice == "scissors") {
    victor = 'HUMAN';
    alert("DANG! You Beat Computer OVERLORD cuz he chose scissors");
  }
  updateRound(victor);
}
document.getElementById("box2").onclick = function() {
  var victor = 'COMPUTER OVERLORD';
  if (computerChoice == "paper") {
    victor = 'draw';
    alert("It is a tie, You chose Paper, computer chose Paper, Lame!");
  } else if (computerChoice == "scissors") {
    alert("Sucker, YOU LOST! You chose Paper, COMPUTER OVERLORD chose scissors");
  } else if (computerChoice == "rock") {
    victor = 'HUMAN';
    alert("DANG! You Beat Computer OVERLORD cuz he chose rock");
  }
  updateRound(victor);
}
document.getElementById("box3").onclick = function() {
  var victor = 'COMPUTER OVERLORD';
  if (computerChoice == "scissors") {
    victor = 'draw';
    alert("It is a tie, You chose scissors, computer chose scissors, Lame!");
  } else if (computerChoice == "rock") {
    alert("Sucker, YOU LOST! You chose scissors, COMPUTER OVERLORD chose rock");
  } else if (computerChoice == "paper") {
    victor = 'HUMAN';
    alert("DANG! You Beat Computer OVERLORD cuz he chose paper");
  }
  updateRound(victor);
}

var round = 0;
var human = 0;
var computer = 0;
var maxGames = 5;

function updateRound(victor) {
  round = round + 1;
  if (victor == "HUMAN") {
    human = human + 1;
  } else if (victor == 'COMPUTER OVERLORD') {
    computer = computer + 1;
  } else {
	// It was a draw
  }
  if (round >= maxGames) {
    alert('You have won ' + human + ' out of ' + round + ' games.');
    // reset the score
    round = 0;
    human = 0;
    computer = 0;
  }
}

<html>
<body>
  <button id='box1'>Rock</button>
  <button id='box2'>Paper</button>
  <button id='box3'>Scissors</button>
</body>
</html>