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"/>
Related
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.
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.
i have a question about my returns in the compare ,
i cant see the rusault in the console.
and ill be happy for advice where i can run codes like that?
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 (chice2 ==="cissors") {
return "rock wins"; }
else{
return "paper wins";}
}
else if (choice1 === "paper") {
if (chice2 ==="rock") {
return "paper wins"; }
else{
return "cissors wins";}
}
else if (choice1 === "cissors") {
if (chice2 ==="paper") {
return "cissors wins"; }
else{
return "rock wins";}
}
else if (choice1 !="cissors","paper","rock") {
return "You Are So Funny!!...."; }
};
If you are returning, then you have to return to something.
A return statement in a function will return to whatever is on the left hand side of the call to the function.
var foo = some_function();
If your code isn't in a function, then returning is an error.
If you want to log something to the console, then use console.log().
You spell choice2 wrong in many places and you have to store returned value to a variable.
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 data = compare(userChoice,computerChoice);
console.log(data);
console.log(compare(userChoice,computerChoice));
function compare(choice1, choice2) {
if(choice1 === choice2) {
return "The result is a tie!";
}
else if (choice1 === "rock") {
if (choice2 ==="cissors") {
return "rock wins"; }
else{
return "paper wins";}
}
else if (choice1 === "paper") {
if (choice2 ==="rock") {
return "paper wins"; }
else{
return "cissors wins";}
}
else if (choice1 === "cissors") {
if (choice2 ==="paper") {
return "cissors wins"; }
else{
return "rock wins";}
}
else if (choice1 !="cissors","paper","rock") {
return "You Are So Funny!!...."; }
};
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);
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);
function compare(choice1,choice2) {
if(choice1 === choice2) {
return "The result is a tie!";
#Make it ask the user and computer to make new choices
}
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"
}
}
else {
return "invalid choice"
}
};
compare(userChoice,computerChoice)
So how do I make it ask the user and the computer to make new choices and start the function again? I have to do it where the # is. I am doing a javascript tutorial, this is not assessment. I tried placing
compare(userChoice, computerChoice) where the # is and it didn't work.
Wrap you loading script to a function function init().
call the init() when it is a tie as below .
function compare(choice1,choice2) {
if(choice1 === choice2) {
//#Make it ask the user and computer to make new choices
alert("The result is a tie!");
init();
}
Edited your code as below..
function init()
{
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);
compare(userChoice,computerChoice);
}
function compare(choice1,choice2) {
if(choice1 === choice2) {
//#Make it ask the user and computer to make new choices
alert("The result is a tie!");
init();
}
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"
}
}
else {
return "invalid choice"
}
}
init();
var userChoice = prompt("Do you choose rock, paper or scissors?");
function computerChoiceMaker(){
var computerChoice = Math.random();
if (computerChoice < 0.34) {
computerChoice = "rock";
} else if(computerChoice <= 0.67) {
computerChoice = "paper";
} else {
computerChoice = "scissors";
} console.log("Computer: " + computerChoice);
return computerChoice;
}
function compare(choice1,choice2) {
if(choice1 === choice2) {
//return "The result is a tie!";
//#Make it ask the user and computer to make new choices
computerChoice = computerChoiceMaker();
userChoice = prompt("The result is a tie! Do you choose rock, paper or scissors?");
console.log("User new choice: " + userChoice);
return compare(userChoice,computerChoice);
}
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"
}
}
else {
return "invalid choice"
}
};
compare(userChoice,computerChoiceMaker());