Javascript Rock, Paper, Scissors [closed] - javascript

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>

Related

JS rock, paper, scissors. HTML output

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);
}

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.

Rock paper, scissors game

I just finished making a rps game on codecademy, and there are some extra tasks that include making an outcome if the user inputs wrong info. Basically, if you don't write an input of "rock", "paper" or "scissors" it will ask you again until you put in the right one.
How can i call userChoice variable until it gets the right answer. I tried it like this, but it just asks 2 times and then posts whatever you write.
var userChoice = prompt("Do you choose rock, paper or scissors?");
if (userChoice != "rock", "paper", "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 === "rock") {
return "rock wins";
}
else {
return "scissors wins";
}
}
}
console.log("Human: " + userChoice);
console.log("Computer: " + computerChoice);
compare(userChoice, computerChoice);
Use a function that references itself:
var userChoice = function () {
var choice = prompt("Do you choose rock, paper or scissors?");
if (choice !== "rock" && choice !== "paper" && choice !== "scissors") {
return userChoice();
} else {
return choice;
}
};
This fiddle has the whole thing working.
Use the following
do {
userChoice = prompt("Do you choose rock, paper or scissors?");
} while (userChoice != "rock", "paper", "scissors")

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);

if statements not working

I am new to js, I just wrote the basic function below based on the rock, paper, scissors game. For some reason the result of the compare function is always showing up as a
"draw" rather than the other results. What am I doing wrong here?
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";
}
choice1 = userChoice;
choice2 = computerChoice;
var compare = function (choice1, choice2) {
if (choice1 == choice2) {
return "draw!";
}
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 == "rock") {
return "rock wins!";
} else {
return "scissors wins!";
}
}
};
compare();
Thanks, Us
You're calling compare without parameters:
compare();
Therefore choice1 and choice2 both equals undefined and your game will always end up as draw.
You should try calling your compare function like this:
compare(userChoice, computerChoice);
If you define a function, the parameter list defines the names of the given variables within the scope of the function. It's not a naming convention for the variables which should be available in the function itself.
You have defined the function with two arguments:
var compare = function (choice1, choice2)
However you have invoked it with 0.
Try specifying the choices:
compare("rock", "paper");
You can't turn on function only by typing func_name() without arguments, thats like "dry shot". Read about function declaring
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";
}
choice1 = userChoice;
choice2 = computerChoice;
function compare (choice1, choice2) {
if (choice1 == choice2) {
return "draw!";
};
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 == "rock") {
return "rock wins!";
} else {
return "scissors wins!";
}
}
};
compare(choice1, choice2);

Categories