We Keep Coding

I have no idea where the error is anymore

I have no idea where the error is anymore. It was first saying that I had an unexpected identifier, then I had an unmatched }, now I have an illegal return statement. I just need some help. Thanks.
var userChoice = prompt("Do you choose rock, paper or scissors?");
var computerChoice = Math.random();
if (computerChoice < 0.34) {
computerChoice = "rock";
} else if (computerChoice <= 0.67) {
computerChoice = "paper";
} else {
computerChoice = "scissors";
}
console.log("Computer: " + computerChoice);
var compare = function(choice1, choice2) {
if (choice1 === choice2) {
return "The result is a tie!";
} else if (choice1 === "rock") {
if (choice2 === "scissors") {
return "rock wins";
} else {
return "paper wins";
}
if (choice2 === "rock") {
return "paper wins";
} else {
return "scissors wins";
} else if (choice1 === "paper") {
if (choice2 === "rock") {
return "paper wins";
} else {
return "scissors wins";
}
}

var userChoice = prompt("Do you choose rock, paper or scissors?");
var computerChoice = Math.random();
if (computerChoice < 0.34) {
computerChoice = "rock";
} else if (computerChoice <= 0.67) {
computerChoice = "paper";
} else {
computerChoice = "scissors";
}
console.log("Computer: " + computerChoice);
var compare = function (choice1, choice2) {
if (choice1 === choice2) {
return "The result is a tie!";
} else if (choice1 === "rock") {
if (choice2 === "scissors") {
return "rock wins";
} else {
return "paper wins";
}
if (choice2 === "rock") {
return "paper wins";
} else if (choice1 === "paper") {
if (choice2 === "rock") {
return "paper wins";
} else {
return "scissors wins";
}
}
}
}
Properly indented code can help find missing curly braces. By the time that something is indented 4 times, it's time to see if it can be refactored.
For example:
The first if has a return. There is no reason to have an "else if" after that. That will get rid of one indent. Same can be said of ("choice2 === "rock"). Trust that when a return is written that it will actually return.

JS - Rock, Paper, Scissor, buttons instead of Prompt

I have the code for a basic "rock, paper, scissor" game in JS. It works with a promt but I would like to be able to make your choices with buttons. I would like to use "getElementById" and "addEventListener("click")". Could anyone point me in the right direction?
HTML:
<button id ="rock"> Rock </button>
Paper
Scissor
JavaScript:
var userChoice = prompt("Do you choose rock, paper or scissors?");
var computerChoice = Math.random();
if (computerChoice < 0.34) {
computerChoice = "rock";
} else if(computerChoice <= 0.67) {
computerChoice = "paper";
} else {
computerChoice = "scissors";
} console.log("Computer: " + computerChoice);
var compare = function (choice1, choice2) {
if (choice1 === choice2) {
return "The result is a tie!";
}
else if (choice1 === "rock") {
if (choice2 === "scissors") {
return "rock wins";
}
else {
return "paper wins";
} if (choice1 === "paper") {
if (choice2 === "rock") {
return "paper wins";
}
else {
return "scissors wins";
} if (choice1 === "scissors") {
if (choice2 === "rock") {
return "rock wins";
} else if (choice2 === "paper") {
return "scissors wins";
}
}
}
}
}
compare (userChoice, computerChoice);

Use the onclick event handler (documentation) in several blocks like this:
document.getElementById('rock').onclick = function(e){
userChoice = 'rock'
}

Here is an example (click "run code snippet"):
document.getElementById('rock').onclick = user;
document.getElementById('paper').onclick = user;
document.getElementById('scissors').onclick = user;
function user(){
var userChoice = this.id;
console.log("User: " + userChoice)
var computerChoice = Math.random();
if (computerChoice < 0.34) {
computerChoice = "rock";
}else if(computerChoice <= 0.67) {
computerChoice = "paper";
}else{
computerChoice = "scissors";
};
console.log("Computer: " + computerChoice);
console.log(compare(userChoice, computerChoice));
function compare(choice1, choice2) {
if (choice1 === choice2) {
return "The result is a tie!";
}
if (choice1 === "rock") {
if (choice2 === "scissors") {
return "rock wins";
}else{
return "paper wins";
}
}
if (choice1 === "paper") {
if (choice2 === "rock") {
return "paper wins";
} else {
return "scissors wins";
}
}
if (choice1 === "scissors") {
if (choice2 === "rock") {
return "rock wins";
} else {
return "scissors wins";
}
}
}
}
<button id="rock">Rock</button>
<button id="paper">Paper</button>
<button id="scissors">Scissor</button>
PS: your function compare was returning undefined for some cases.

Calling parameters from a function

I'm trying to learn javascript and this lesson is having me create a rock, paper, scissors game. It is asking for me to:
Call your function and pass in userChoice and computerChoice as your two arguments.
I am not sure how to pass in userChoice and computer Choice. I tried doing this:
console.log(compare + userChoice + computerChoice)
But obviously it isn't correct.
What am I doing wrong??
var userChoice = prompt("Do you choose rock, paper or scissors?");
var computerChoice = Math.random();
if (computerChoice < 0.34) {
computerChoice = "rock";
} else if(computerChoice <= 0.67) {
computerChoice = "paper";
} else {
computerChoice = "scissors";
} console.log("Computer: " + computerChoice);
var compare = function(choice1, choice2) {
if (choice1 === choice2) {
return "The result is a tie!";
} else if (choice1 === "rock") {
if (choice2 === "scissors") {
return "rock wins";
} else {
"paper wins";
}
} else if (choice1 === "paper") {
if (choice2 === "rock") {
return "paper wins";
} else {
return "scissors wins";
}
} else if (choice1 === "scissors") {
if (choice2 === "rock") {
return "rock wins";
} else {
return "scissors wins";
}
}
}
console.log(compare + userChoice + computerChoice)

You're VERY close, arguments are passed to functions like this:
compare(userchoice, computerChoice);

Running js function from button and displaying

I have made a function called "compare" and want to run it from a button with the id "start"
<input type="button" id="start" onClick="compare(userChoice, computerChoice)" value="Start">
but when it's pressed the function does not load, also I tried to display it in this
document.getElementById("score").innerHTML = compare(userChoice, computerChoice);
but the problem with it is that it starts as the page loads
<script>
var userChoice = prompt("Do you choose rock, paper or scissors?");
var computerChoice = Math.random();
if (computerChoice < 0.34) {
computerChoice = "rock";
} else if(computerChoice <= 0.67) {
computerChoice = "paper";
} else {
computerChoice = "scissors";
}
var compare = function(choice1, choice2){
if(choice1 === choice2){
return "The result is a tie!"
}
else if(choice1 === "rock"){
if(choice2 === "scissors"){
return "rock wins";
}
else{
return "paper wins"
}
}
else if(choice1 === "paper"){
if(choice2 === "rock"){
return "paper wins";
}
else{
return "scissors wins"
}
}
else if(choice1 === "scissors"){
if(choice2 === "paper"){
return "scissors wins";
}
else{
return "rock wins"
}
}
};
document.getElementById("player").innerHTML = userChoice;
document.getElementById("computer").innerHTML = computerChoice;
document.getElementById("score").innerHTML = compare(userChoice, computerChoice) ;
</script>
Thank you for reading

your function compare returns a string, so, calling it from onclick will result in nothing happening, you haven't specified what you want to do with the return of the function
rather than all your "returns" in that function, you could replace them with
document.getElementById("score").innerHTML =
a better way would be something like
var compare = function() {
var userChoice = prompt("Do you choose rock, paper or scissors?");
var computerChoice = Math.random();
if (computerChoice < 0.34) {
computerChoice = "rock";
} else if(computerChoice <= 0.67) {
computerChoice = "paper";
} else {
computerChoice = "scissors";
}
var check = function () {
if (userChoice === computerChoice) {
return "The result is a tie!"
} else if (userChoice === "rock") {
if (computerChoice === "scissors") {
return "rock wins";
} else {
return "paper wins"
}
} else if (userChoice === "paper") {
if (computerChoice === "rock") {
return "paper wins";
} else {
return "scissors wins"
}
} else if (userChoice === "scissors") {
if (computerChoice === "paper") {
return "scissors wins";
} else {
return "rock wins"
}
}
}
document.getElementById("score").innerHTML = check();
};
or even
var compare = function() {
var userChoice = prompt("Do you choose rock, paper or scissors?");
var computerChoice = Math.random();
if (computerChoice < 0.34) {
computerChoice = "rock";
} else if(computerChoice <= 0.67) {
computerChoice = "paper";
} else {
computerChoice = "scissors";
}
document.getElementById("score").innerHTML = function () {
if (userChoice === computerChoice) {
return "The result is a tie!"
} else if (userChoice === "rock") {
if (computerChoice === "scissors") {
return "rock wins";
} else {
return "paper wins"
}
} else if (userChoice === "paper") {
if (computerChoice === "rock") {
return "paper wins";
} else {
return "scissors wins"
}
} else if (userChoice === "scissors") {
if (computerChoice === "paper") {
return "scissors wins";
} else {
return "rock wins"
}
}
}(); // IIEF
};
(code edited based on comment question)
in both cases you can change the button to
<input type="button" id="start" onClick="compare()" value="Start"/>

How to use for loop in JavaScript, especially in my program?

I want to run the following program in a continuous loop till the length of my array. I want the program to run as it is for the first input then after first comparison the program should not end rather it should run till the for loop condition is satisfied. The program is as follows:
var userChoice = prompt("What would you like to select: rock, paper or scissors?");
var computerChoice = Math.random();
if(computerChoice<0.34) {
computerChoice = "rock";
}
else if(computerChoice<=0.67) {
computerChoice = "paper";
}
else if(computerChoice<=1) {
computerChoice = "scissors";
}
console.log("Computer: "+computerChoice);
var compare = function(choice1, choice2) {
if(choice1 === choice2) {
return "It is a tie!";
}
else if(choice1 === rock) {
if(choice2 === paper) {
return "paper wins";
}
else {
return "rock wins";
}
}
else if(choice1 === paper) {
if(choice2 === rock) {
return "paper wins";
}
else {
return "scissors wins";
}
}
else if(choice1 === scissors) {
if(choice2 === paper) {
return "scissors wins";
}
else {
return "rock wins";
}
}
};
compare(userChoice, computerChoice);
My array is: var userChoice = ["rock", "paper", "scissors"];
I tried it as:
var userChoice = ["rock", "paper", "scissors"];
for(i=0; i<userChoice.length; i++) {
var userChoice = prompt("What would you like to select: rock, paper or scissors?");
var computerChoice = Math.random();
if(computerChoice<0.34) {
computerChoice = "rock";
}
else if(computerChoice<=0.67) {
computerChoice = "paper";
}
else if(computerChoice<=1) {
computerChoice = "scissors";
}
console.log("Computer: "+computerChoice);
var compare = function(choice1, choice2) {
if(choice1 === choice2) {
return "It is a tie!";
}
else if(choice1 === rock) {
if(choice2 === paper) {
return "paper wins";
}
else {
return "rock wins";
}
}
else if(choice1 === paper) {
if(choice2 === rock) {
return "paper wins";
}
else {
return "scissors wins";
}
}
else if(choice1 === scissors) {
if(choice2 === paper) {
return "scissors wins";
}
else {
return "rock wins";
}
}
};
compare(userChoice, computerChoice);
}
but it gives me an error: rock is not defined.

You've missed some quotes:-
var userChoices = ["rock", "paper", "scissors"];
var compare = function(choice1, choice2) {
if(choice1 === choice2) {
return "It is a tie!";
}
else if(choice1 === "rock") {
if(choice2 === "paper") {
return "paper wins";
}
else {
return "rock wins";
}
}
else if(choice1 === "paper") {
if(choice2 === "rock") {
return "paper wins";
}
else {
return "scissors wins";
}
}
else if(choice1 === "scissors") {
if(choice2 === "paper") {
return "scissors wins";
}
else {
return "rock wins";
}
}
};
for(i=0; i<userChoices.length; i++) {
var userChoice = prompt("What would you like to select: rock, paper or scissors?");
var computerChoice = Math.random();
if(computerChoice<0.34) {
computerChoice = "rock";
}
else if(computerChoice<=0.67) {
computerChoice = "paper";
}
else if(computerChoice<=1) {
computerChoice = "scissors";
}
var result = compare(userChoice, computerChoice);
console.log("User: "+userChoice+", Computer: "+computerChoice+", Result: "+result);
}