I'm confused on which comparison operators to use for my JavaScript game. I have tried using the options &&, and ||
<p>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 ...</p>

<p><em>For Example ... code below</em></p>

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

<p>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. </p>

<h3>Here's my JavaScript code ...</h3>

<pre><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 = "&lt;h2&gt;Hmm, we have a tie! I chose &lt;/h2&gt;" + ComputerChoice + " &lt;h2&gt;too.&lt;/h2&gt;";
} 

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

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

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

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

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

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

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

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

<p>}</p>

<p>HTML </p>

<pre><code> &lt;html&gt;
    &lt;body&gt;

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


 &lt;center&gt;
    &lt;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"&gt;

    &lt;br&gt;

  &lt;input type="text" placeholder="Make your choice..."&gt;

    &lt;br&gt;

    &lt;button id="user" onclick="Game();"&gt; Good Luck! &lt;/button&gt;

     &lt;/center&gt;

   &lt;/body&gt;
&lt;/html&gt;
</code></pre>