Develop Reference

if else statement failing in a paper-rock-scissors challenge

I'm a complete beginner in Javascript and coding in general.
I'm trying to make a simple command-line javascript paper-rock-scissors game but I keep getting a bug. I've created a function for the computer to randomly pick paper, rock or scissors and getting the user's selection from a prompt. To get the result I've written an if else statement that will show an alert with the outcome but regardless the input it always shows a tie. It seems that the code always ends up on the else part of the statement and I can't figure out why. Can someone help me with what's wrong with the statement and why it skips to else?
function computerPlay() {
let computerChoices = ["paper", "rock", "scissors"];
let computerChoice = computerChoices[Math.floor(Math.random() * computerChoices.length)];
return computerChoice;
}
function playRound(computerSelection, playerSelection) {
if (computerSelection === "rock" && playerSelection.toLowerCase() === "paper") {
alert("You win, paper beats rock!")
} else if (computerSelection === "paper" && playerSelection.toLowerCase() === "scissors") {
alert("You win, scissors beat paper!")
} else if (computerSelection === "scissors" && playerSelection.toLowerCase() === "rock") {
alert("You win, rock beat scissors")
} else if (computerSelection === "rock" && playerSelection.toLowerCase() === "scissors") {
alert("You loose, rock beats scissors")
} else if (computerSelection === "paper" && playerSelection.toLowerCase() === "rock") {
alert("You loose, paper beats rock")
} else if (computerSelection === "scissors" && playerSelection.toLowerCase() === "paper") {
alert("You loose, scissors beats paper")
} else {
alert("even steven")
}
}
for (let i = 1; i <= 5; i++) {
computerPlay()
const playerSelection = prompt("Please enter your choice", " ");
const computerSelection = computerPlay();
console.log(computerSelection);
console.log(playerSelection);
playRound(computerSelection, playerSelection);
}

Remove " " from the prompt, it's adding an unnnecessary white space causing issues in your if statements
function computerPlay() {
let computerChoices = ["paper", "rock", "scissors"];
let computerChoice = computerChoices[Math.floor(Math.random() * computerChoices.length)];
return computerChoice;
}
function playRound(computerSelection, playerSelection) {
if (computerSelection === "rock" && playerSelection.toLowerCase() === "paper") {
alert("You win, paper beats rock!")
} else if (computerSelection === "paper" && playerSelection.toLowerCase() === "scissors") {
alert("You win, scissors beat paper!")
} else if (computerSelection === "scissors" && playerSelection.toLowerCase() === "rock") {
alert("You win, rock beat scissors")
} else if (computerSelection === "rock" && playerSelection.toLowerCase() === "scissors") {
alert("You loose, rock beats scissors")
} else if (computerSelection === "paper" && playerSelection.toLowerCase() === "rock") {
alert("You loose, paper beats rock")
} else if (computerSelection === "scissors" && playerSelection.toLowerCase() === "paper") {
alert("You loose, scissors beats paper")
} else {
alert("even steven")
}
}
for (let i = 1; i <= 5; i++) {
computerPlay()
const playerSelection = prompt("Please enter your choice");
const computerSelection = computerPlay();
console.log(computerSelection);
console.log(playerSelection);
playRound(computerSelection, playerSelection);
}

Conditional statement returns same result regardless of outcome

I'm trying to manipulating the DOM to show who wins when playing Rock paper scissors game. I'm targeting a <p class="result" to do this. But it doesn't matter what the result is, "it's a Draw" is only displayed. Please help!
On a side note, if any one has any suggestions on how to refactor this due to the multiple lines of "player wins", "Computer wins" code, then please let me know.
for (var i = 0; i < document.querySelectorAll("button").length; i++) {
document.querySelectorAll("button")[i].addEventListener("click", function() {
var playerChoice = (this.innerHTML);
var random = Math.floor(Math.random() * document.querySelectorAll("button").length);
var compChoice = ["Rock", "Paper", "Scissors"]
document.querySelector(".player").innerHTML = playerChoice;
document.querySelector(".computer").innerHTML = compChoice[random]
if (playerChoice === "Rock" && compChoice === "Scissors") {
document.querySelector(".result").innerHTML = "Player Wins.";
} else if (playerChoice === "Scissors" && compChoice === "Paper") {
document.querySelector(".result").innerHTML = "Player Wins.";
} else if (playerChoice === "Paper" && compChoice === "Rock") {
document.querySelector(".result").innerHTML = "Player Wins.";
} else if (playerChoice === "Scissors" && compChoice === "Rock") {
document.querySelector(".result").innerHTML = "Computer Wins.";
} else if (playerChoice === "Paper" && compChoice === "Scissors") {
document.querySelector(".result").innerHTML = "Computer Wins.";
} else if (playerChoice === "Rock" && compChoice === "Paper") {
document.querySelector(".result").innerHTML = "Computer Wins.";
} else if (playerChoice === compChoice) {
document.querySelector(".result").innerHTML = "It's a draw";
}
console.log(playerChoice);
})
}
https://ibb.co/44Z1vQ3

Brandom's idea in the comments above to console.log playerChoice helped me realise a way to problem solve this by also console logging compchoice which returns an array, so i needed to encapsulate the compChoice[random] into a variable first shown below.
It is now all working as it should.
for (var i = 0; i < document.querySelectorAll("button").length; i++) {
document.querySelectorAll("button")[i].addEventListener("click", function() {
var playerChoice = (this.innerHTML);
var random = Math.floor(Math.random() * document.querySelectorAll("button").length);
var choices = ["Rock", "Paper", "Scissors"]
var compChoice = choices[random]
document.querySelector(".player").innerHTML = playerChoice;
document.querySelector(".computer").innerHTML = compChoice;
if (playerChoice === "Rock" && compChoice === "Scissors") {
document.querySelector(".result").innerHTML = "Player Wins.";
} else if (playerChoice === "Scissors" && compChoice === "Paper") {
document.querySelector(".result").innerHTML = "Player Wins.";
} else if (playerChoice === "Paper" && compChoice === "Rock") {
document.querySelector(".result").innerHTML = "Player Wins.";
} else if (playerChoice === "Scissors" && compChoice === "Rock") {
document.querySelector(".result").innerHTML = "Computer Wins.";
} else if (playerChoice === "Paper" && compChoice === "Scissors") {
document.querySelector(".result").innerHTML = "Computer Wins.";
} else if (playerChoice === "Rock" && compChoice === "Paper") {
document.querySelector(".result").innerHTML = "Computer Wins.";
} else if (playerChoice === compChoice) {
document.querySelector(".result").innerHTML = "It's a draw";
}
console.log(playerChoice);
console.log(compChoice);
})
}

Changing the value of a variable with DOM element click

Im trying to allow the player to click the Rock paper or scissors button and that changes the value of the 'playerChoice' variable so so the playRound function can be called with their choice but it doesnt seem to work and im not sure what im doing wrong
Code
// Rock paper scissors game
let rockBtn = document.querySelector('.Rock');
let paperBtn = document.querySelector('.Paper');
let scissorBtn = document.querySelector('.Scissors');
function computerPlay() {
let rps = ["Rock", "Paper", "Scissors"];
let computerChoice = rps[Math.floor(Math.random()*rps.length)];
return computerChoice;
}
function playRound(playerSelection, computerSelection) {
if (playerSelection == "Rock" && computerSelection == "Rock") {
console.log('Its a Draw');
} else if (playerSelection == "Rock" && computerSelection == "Scissors") {
console.log("Player wins");
} else if(playerSelection == "Rock" && computerSelection == "Paper") {
console.log("Computer wins");
} else if(playerSelection == "Paper" && computerSelection == "Paper") {
console.log("Its a draw");
} else if(playerSelection == "Paper" && computerSelection == "Scissors") {
console.log("Computer wins");
} else if(playerSelection == "Paper" && computerSelection == "Rock") {
console.log("Player wins");
} else if(playerSelection == "Scissors" && computerSelection == "Scissors") {
console.log("Its a draw");
} else if(playerSelection == "Scissors" && computerSelection == "Paper") {
console.log("Player wins ");
} else if(playerSelection == "Scissors" && computerSelection == "Rock") {
console.log("Computer wins");
}
}
function game() {
const computerChoice = computerPlay();
var playerChoice = "";
rockBtn.addEventListener('click' , function() {
playerChoice = "Rock";
});
paperBtn.addEventListener('click' , function() {
playerChoice = "Paper";
console.log(playerChoice);
});
scissorBtn.addEventListener('click' , function() {
playerChoice = "Scissors";
});
console.log("Player choice is" + playerChoice);
console.log('Computer choice is' + computerChoice);
playRound(playerChoice, computerChoice);
}
game();
Is this the correct way to do this is there a better way?

You should call playRound method inside the click listeners.
// Rock paper scissors game
let rockBtn = document.querySelector('.Rock');
let paperBtn = document.querySelector('.Paper');
let scissorBtn = document.querySelector('.Scissors');
var playerChoice = "";
function computerPlay() {
let rps = ["Rock", "Paper", "Scissors"];
let computerChoice = rps[Math.floor(Math.random()*rps.length)];
return computerChoice;
}
function playRound(playerSelection, computerSelection) {
if (playerSelection == "Rock" && computerSelection == "Rock") {
console.log('Its a Draw');
} else if (playerSelection == "Rock" && computerSelection == "Scissors") {
console.log("Player wins");
} else if(playerSelection == "Rock" && computerSelection == "Paper") {
console.log("Computer wins");
} else if(playerSelection == "Paper" && computerSelection == "Paper") {
console.log("Its a draw");
} else if(playerSelection == "Paper" && computerSelection == "Scissors") {
console.log("Computer wins");
} else if(playerSelection == "Paper" && computerSelection == "Rock") {
console.log("Player wins");
} else if(playerSelection == "Scissors" && computerSelection == "Scissors") {
console.log("Its a draw");
} else if(playerSelection == "Scissors" && computerSelection == "Paper") {
console.log("Player wins ");
} else if(playerSelection == "Scissors" && computerSelection == "Rock") {
console.log("Computer wins");
}
playerChoice = "";
}
rockBtn.addEventListener('click' , function() {
playerChoice = "Rock";
playRound(playerChoice, computerPlay());
});
paperBtn.addEventListener('click' , function() {
playerChoice = "Paper";
playRound(playerChoice, computerPlay());
});
scissorBtn.addEventListener('click' , function() {
playerChoice = "Scissors";
playRound(playerChoice, computerPlay());
});

Javascript function does not run when called

var gameFunction = function()
{
var userChoice = prompt("What do you choose: rock, paper, or scissors?")
var computerChoice = Math.random();
if (0 < computerChoice < 0.33)
{
computerChoice = "rock";
}
else if (0.33 < computerChoice < 0.67)
{
computerChoice = "scissors";
}
else
{
computerChoice = "paper";
}
console.log("Computer choice: ",computerChoice)
if (userChoice === computerChoice)
{
return "The result is a tie! Enter a new result?"
gameFunction();
}
else if (userChoice === "rock")
{
if (computerChoice === "scissors")
{
return "rock wins"
}
else if (computerChoice === "paper")
{
return "paper wins"
}
}
else if (userChoice === "paper")
{
if (computerChoice === "rock")
{
return "paper wins"
}
else if (computerChoice === "scissors")
{
return "scissors win"
}
}
else if (userChoice === "scissors")
{
if (computerChoice === "paper")
{
return "scissors wins"
}
else if (computerChoice === "rock")
{
return "rock win"
}
}
}
gameFunction();
This is the 9/9 section of the "Rock paper scissors" game from Codecademy: Javascript.
My problem is this:
When the User and Computer ties, it's supposed to re-run the entire "gameFunction" function, meaning it should ask a new input from the user and get a new input from the computer.
However, the program just prints out "The result is a tie!" without re-running "gameFunction." How can I fix this?

No line executed after return statement.. try
gameFunction();
return "The result is a tie! Enter a new result?"

The return statement exits the "gameFunction" function so it doesn't execute the next line. Try using a prompt instead like this:
if (userChoice === computerChoice)
{
prompt("The result is a tie! Enter a new result?");
gameFunction();
}
This way the user can respond to your prompt and you can use it to decide if the game is to continue. You could always just use an alert as well :)

Change return to alert(), like below:
From:
return "The result is a tie! Enter a new result?"
To:
alert("The result is a tie! Enter a new result?");

what about this: https://jsfiddle.net/41gcfL6g/
The thing here is adding a parameter to the function, so you can determine if have been a tie the last time you played. And then in the case of tie, instead of calling the function after the return, you return the result of the gameFunction

The recusive gameFunction() method inside the gameFunction() because the
control returns to the first calling function.
if (userChoice === computerChoice)
{
return "The result is a tie! Enter a new result?"
gameFunction();
}
So instead of return you can print a message there showing there is a tie.
if (userChoice === computerChoice)
{
alert("The result is a tie! Enter a new result?")
gameFunction();
}
and when the above condition is not met then it simply returns to the calling area and stop.

see fiddle, don't use return, console.log https://jsfiddle.net/o62vda05/
var userChoice;
function startGame()
{
userChoice = prompt("What do you choose: rock, paper, or scissors?");
gameFunction();
}
function gameFunction()
{
var computerChoice = Math.random();
if (0 < computerChoice < 0.33)
{
computerChoice = "rock";
}
else if (0.33 < computerChoice < 0.67)
{
computerChoice = "scissors";
}
else
{
computerChoice = "paper";
}
console.log("Computer choice: ",computerChoice)
if (userChoice === computerChoice) {
console.log( "The result is a tie! Enter a new result?");
startGame();
} else if (userChoice === "rock") {
if (computerChoice === "scissors")
{
console.log( "rock wins");
}
else if (computerChoice === "paper")
{
console.log( "paper wins");
}
} else if (userChoice === "paper") {
if (computerChoice === "rock") {
console.log( "paper wins");
} else if (computerChoice === "scissors") {
console.log ("scissors win");
}
} else if (userChoice === "scissors") {
if (computerChoice === "paper") {
console.log ("scissors wins");
} else if (computerChoice === "rock") {
console.log( "rock win");
}
}
}
startGame();

Rock Paper Scissors Javascript Function

I have this code right now for my Rock Paper Scissors JS game. In my compare function, I tried to program it so that it will display an alert message if either "Rock", "Paper", or "Scissors" is not entered. It does not work though, and I get no response when I enter in a different string than the 3 choices that work.
var userChoice = prompt("Rock, Paper, or Scissors");
var computerChoice = Math.random();
var compchoice = function ()
{
if (computerChoice <= 0.34)
{
return computerChoice = "Rock";
}
else if(computerChoice <= 0.67 && computerChoice >= 0.35)
{
return computerChoice = "Paper";
}
if (computerChoice >= 0.68)
{
return computerChoice = "Scissors";
}
};
var compare = function (choice1, choice2)
{
if (computerChoice === "Rock" || "Paper" || "Scissors")
{
if (choice1 === choice2)
{
return alert("The result is a tie!");
}
else if (choice1 === "Rock")
{
if (choice2 === "Scissors")
{
return alert("Rock crushes Scissors!");
}
else if (choice2 === "Paper")
{
return alert("Paper covers Rock!");
}
}
if (choice1 === "Scissors")
{
if (choice2 === "Rock")
{
return alert("Rock crushes Scissors!");
}
else if (choice2 === "Paper")
{
return alert("Scissors cuts Paper!");
}
}
else if (choice1 === "Paper")
{
if (choice2 === "Rock")
{
return alert("Paper covers Rock!");
}
else if (choice2 === "Scissors")
{
return alert("Scissors cuts Paper!");
}
}
}
else
{
return alert("Please type Rock, Paper, or Scissors next time");
}
};
compchoice();
compare(userChoice, computerChoice);
Any reasons why?

computerChoice === "Rock" || "Paper" || "Scissors" is always true, since it parses as:
(computerChoice === "Rock") || ("Paper") || ("Scissors")
And "Paper" is a truthy value.
Also, you seem to be comparing computerChoice, not userChoice.
Fixed:
if (userChoice === "Rock" || userChoice === "Paper" || userChoice === "Scissors")
Or:
// array and indexOf
if (["Rock", "Paper", "Scissors"].indexOf(userChoice) > -1)
// doesn't work in IE8
Or:
// regex
if (/^(Rock|Paper|Scissors)$/.test(userChoice))

if (computerChoice === "Rock" || computerChoice === "Paper" || computerChoice === "Scissors")
TADA!.... "Paper" as a string resolves as true :D

You have a logic error in your first if in the compare:
if (computerChoice === "Rock" || "Paper" || "Scissors")
Should be:
if (computerChoice === "Rock" || computerChoice === "Paper" || computerChoice === "Scissors")
Edit: why you have this if statement in the first place does not make sense to me. You want to compare choice1 against choice2.

You can't do comparisons like this:
if (computerChoice === "Rock" || "Paper" || "Scissors")
You need to check each separately, like:
if(computerChoice === "Rock" || computerChoice === "Paper" || computerChoice === "Scissors")

The answer is given already, but you could optimize your code even more. This is what I would write:
var options=["Rock","Paper","Scissors"];
var beats=["crushes","covers","cuts"];
function play(choice){// "choice" = index of option
if(choice<0||choice>options.length-1){alert("invalid input");}
var loser=choice>0?choice-1:options.length-1; // what would lose from "choice"
var winner=choice<options.length-1?choice+1:0; // what would beat "choice"
switch(Math.floor(Math.random()*3)){ //chance of 1 in 3
case 0: alert(options[choice]+beats[choice]+options[loser]); break;// win :-)
case 1: alert(options[winner]+beats[winner]+options[choice]); break;// lose :-(
case 2: alert("The result is a tie!"); break;
}
}
play(0);// 0=rock!
Since the chance is 1 in 3 you only have to create 3 static outcomes (win, lose or draw), and generate the message for it.

I think you need the comparison to be userChoice like
if (userChoice === "Rock" || "Paper" || "Scissors")
{