working on a rock paper scissors assignment where a global variable increments forward depending on whether the computer or the human wins. My functions work fine, but the scoreboard will not update when using .innerHTML. Any suggestions?
document.getElementById("humanScore").innerHTML = humanTotal;
document.getElementById("computerScore").innerHTML = compTotal;
There are a few issues you are having.
In your play function, you are not doing anything with computerChoice variable, and it should be a result of the function call to compPlay(). Presently it is var computerChoice = compPlay, which is actually assigning computerChoice to a function, not the result of it.
Secondly in the testing if statements, you are checking the value again compPlay, which is a function, I think it should be computerChoice
Thirdly. the return value from compPlay is an index, it should that index value from the compOptions array
updated code below
var humanTotal =0;
var compTotal=0;
document.getElementById("rock").onclick = setRock;
document.getElementById("paper").onclick = setPaper;
document.getElementById("scissors").onclick = setScissors;
function setRock(){
play("rock")
}
function setPaper(){
play("paper")
}
function setScissors(){
play("scissors")
}
function play(humanChoice) {
var computerChoice = compPlay(); //<-- Change Here
//And all the following if statements to check the computer choice
if (humanChoice == "rock"){
if (computerChoice =="rock"){
} else if (computerChoice =="scissors"){
humanTotal++;
} else if (computerChoice =="paper"){
compTotal++;
}
}
if (humanChoice == "paper"){
if (computerChoice =="paper"){
} else if (computerChoice =="rock"){
humanTotal++;
} else if (computerChoice =="scissors"){
compTotal++;
}
}
if (humanChoice == "scissors"){
if (computerChoice =="scissors"){
} else if (computerChoice =="paper"){
humanTotal++;
} else if (computerChoice =="rock"){
compTotal++;
}
}
document.getElementById("humanScore").innerHTML = humanTotal;
document.getElementById("computerScore").innerHTML = compTotal;
}
function compPlay (){
var compOptions = ['rock', 'paper', 'scissors'];
var randomChoice = Math.floor(Math.random()*compOptions.length);
return compOptions[randomChoice]; //<-- Change Here
}
It has nothing to do with innerHTML, that is working fine, it was just that the score was always zero. The reason was because none of the if statements testing for "rock", "paper" or "scissors" ever resolved to true as the computerChoice never matched "rock","paper", or "scissors", so sorry but it was your functions.
Your functions does not work fine. The innerHTML-part works like it should (proof: http://codepen.io/anon/pen/qlIsG).
The problem is that you've made some error in your game logic that causes the scoreboard to end up 0-0 every time.
Good luck on your assignment.
You have several mistakes, its not a problem of innerHTML:
1) Change this, and use computerChoice to check computers play
var computerChoice = compPlay();
2) In your compPlay function, change this:
return compOptions[randomChoice]; // you want the play, not the random number
Working version:
