I have a Javascript code with a rock, paper, scissors game and buttons to make the User choice. The game itself works as right now, it prints out in an HTML element the User choice and the computer choice. I'm at a loss at how to call the compare function and have it display the results that I wrote in there.
HTML:
<button id ="rock"> Rock </button>
<button id ="paper"> Paper </button>
<button id ="scissors"> Scissors </button>
<p id="output" onclick="user()"> </p>
JS:
document.getElementById('rock').onclick = user;
document.getElementById('paper').onclick = user;
document.getElementById('scissors').onclick = user;
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";
}
}
}
function user(){
var userChoice = this.id;
document.getElementById("output").innerHTML = ("User: " + userChoice + ". "
+ "Computer: "+ computerChoice);
}
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'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);
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I followed the tutorial on Javascript on http://www.codecademy.com and one part was to create a rock, paper, scissors game. After I finished it I figured I would redesign it a bit to use on my own. So I did this:
<!DOCTYPE html>
<html>
<body>
<script>
var userChoice = document.getElementById("userChoice").value;
if (userChoice != "rock" && userChoice != "paper" && userChoice != "scissors"){
alert("Your choice was not rock, paper or scissors");
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 win";
} else {
return "Rock wins";
}
}
}
function Run() {
document.getElementById("pcc").innerHTML = "Computer: " + computerChoice;
document.getElementById("result").innerHTML = compare(userChoice, computerChoice);
}
</script>
<main>
<h2>Choose between rock, paper or scissors: </h2>
<input id="userChoice">
<button onClick="Run()">Choose</button>
<p id="pcc"></p>
<p id="result"></p>
</main>
</body>
</html>
But it doesn't work, I get undefined for compare, computerChoice, userChoice and that there isn't anything that becomes stored in value.
What's wrong?
You need to put all of the content of the script in a function, try this. It is trying to use the variables before they are set by the logic at the beginning since the logic at the beginning is never called:)
function run(){
var userChoice = document.getElementById("userChoice").value;
if (userChoice != "rock" && userChoice != "paper" && userChoice != "scissors"){
alert("Your choice was not rock, paper or scissors");
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 win";
} else {
return "Rock wins";
}
}
}
document.getElementById("pcc").innerHTML = "Computer: " + computerChoice;
document.getElementById("result").innerHTML = compare(userChoice, computerChoice);
}
You should remove the <main> tags and correctly close your second paragraph tag like so:
<p id="result"></p>
It return no error but I sense something wrong in codeacademy's console. It return single string - "rock", "paper" or "scissors". I couldn't detect what's 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";
}
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 =="scissors") return "scissors wins"
else return "paper wins";
}
if(choice1 == "scissors"){
if(choice2 =="paper") return "scissors wins"
else return "rock wins";
}
compare(userChoice, computerChoice);
}
Any bug in the logic and the program flow?
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";
}
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 =="scissors") return "scissors wins"
else return "paper wins";
}
if(choice1 == "scissors"){
if(choice2 =="paper") return "scissors wins"
else return "rock wins";
}
}
compare(userChoice, computerChoice);
You were calling compare() inside the definition of compare.
var userChoice = prompt("Do you choose rock, paper or scissors?");
var computerChoice = Math.random();
// Sanity check. This is the result if there is no a tie, win or loss.
var userResult = 'You must choose either rock, paper or scissors.';
if (computerChoice < 0.34) {
computerChoice = "rock";
} else if (computerChoice <= 0.67) {
computerChoice = "paper";
} else {
computerChoice = "scissors";
}
function compare(choice1, choice2) {
if (choice1 === choice2) {
userResult = "It is a tie!";
} else if (choice1 === "rock") {
if (choice2 === "scissors") {
userResult = "You win! Rock smashes scissors";
} else {
userResult = "You lose! Paper covers rock";
}
} else if (choice1 === "paper") {
if (choice2 === "rock") {
userResult = "You win! Paper covers rock";
} else {
userResult = "You lose! Scissors cut paper";
}
} else if (choice1 === "scissors") {
if (choice2 === "paper") {
userResult = "You win! Scissors cut paper";
} else {
userResult = "You lose! Rock smashes paper";
}
}
return userResult;
}
compare(userChoice, computerChoice);
I added a little sanity check for when someone tries to throw 'potato' or something that is not rock, paper or scissors. Also, made it clear who won or lost and why. Sorry, I couldn't resist.