JEREMY HERNANDEZ JEREMY HERNANDEZ - 15 days ago 5
HTML Question

I'm confused on which comparison operators to use for my JavaScript game. I have tried using the options &&, and ||

The problem : When the User types in something in the textbox such as 2 (paper) or 3 (scissors) the "ComputerChoice" will randomly generate a number 1 through 3. What I am trying to do is have the computer understand the scenarios such as ...

For Example ... code below

If (UserChoice == 1 || ComputerCoice == 3)
{
// execute a win message
}


But I believe that the first scenarios (If the user chooses rock [aka "1"]) is throwing the whole system off. I'm using this many If-statements because we have not learned cases or nested-Ifs yet. If you need any clarification please feel free to comment down below.

Here's my JavaScript code ...



function Game() {

var rock = 1;
var paper = 2;
var scissors = 3;

var ComputerChoice = Math.floor(Math.random() * 3 + 1);
var UserChoice = document.getElementById("user").value;

console.log(ComputerChoice); // to check validity

if (UserChoice == 1 | ComputerChoice == 1) { // The rock portion of the game is 100% functional
document.getElementById("user").innerHTML = "<h2>Hmm, we have a tie! I chose </h2>" + ComputerChoice + " <h2>too.</h2>";
}

else if (UserChoice == 1 | ComputerChoice == 2) {
document.getElementById("user").innerHTML = "<h2>You lost! The computer chose</h2>" + ComputerChoice;
}

else if (UserChoice = 1 | ComputerChoice == 3) {
document.getElementById("user").innerHTML = "<h2>You won! The computer chose</h2>" + ComputerChoice;
}

else if (ComputerChoice == 2 | UserChoice == 2) { // says i lose
document.getElementById("user").innerHTML = "<h2>Hmm, we have a tie! I chose </h2>" + ComputerChoice + " <h2>too.</h2>";
}

else if (UserChoice == 2 | ComputerChoice == 3) { // says I win??
document.getElementById("user").innerHTML = "<h2>You lost! The computer chose</h2>" + ComputerChoice;
}

else if (UserChoice == 2 | ComputerChoice == 1) { // says i tie
document.getElementById("user").innerHTML = "<h2>You won! The computer chose</h2>" + ComputerChoice;
}

else if (UserChoice == 3 | ComputerChoice == 3) { // says i win??
document.getElementById("user").innerHTML = "<h2>Hmm, we have a tie! I chose </h2>" + ComputerChoice + " <h2>too.</h2>";
}

else if (ComputerChoice == 3 | UserChoice == 1) { // scissors also tie?
document.getElementById("user").innerHTML = "<h2>You lost! The computer chose</h2>" + ComputerChoice;
}

else if (UserChoice == 3 | ComputerChoice == 2) { // says i lose??
document.getElementById("user").innerHTML = "<h2>You won! The computer chose</h2>" + ComputerChoice;
}


}

HTML

<html>
<body>

<center>
<div style="width:793px; height:62px ;border:6px; background-color:#263035"><h1>Rock= 1 Paper= 2 Scissors= 3</h1></div>
</center>


<center>
<img src="https://developer.ibm.com/dwblog/wp-content/uploads/sites/73/2016/02/dwblog-rockpaperscissors-e1455070810415.png" width="850" height="425" alt= "Rock, Paper, or Scissors">

<br>

<input type="text" placeholder="Make your choice...">

<br>

<button id="user" onclick="Game();"> Good Luck! </button>

</center>

</body>
</html>

Answer

You'd have to use the && it's an 'and' operator. So when the if block gets executed you check both conditions, otherwise only one of them has to be true.

here's a JSFiddle with a working version

https://jsfiddle.net/y9uohpzq/

Note, the code is quite messy and it can be done with way less if else blocks