title: JavaScript giving wrong output
body: <p>I am creating the game (paper/scissors/stone) and in my final section I want to compare userChoice vs computerChoice, but for some reason I am getting wrong output: when I press on the button e.g 'Stone' and computer choose 'Scissors' I am getting following output: 'You Chose Stone. Computer Chose Scissors You lose! Try again.' but this is wrong! should be in the other side.
  I am also not getting return when "It's a tie!";
  Can you please help?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//user choice
  var output = document.getElementById("output");
  var result = document.getElementById("result");
  var count = 3;
  var countUser = 0;
  var countComputer = 0;
  var paper = document.querySelector("#paper header");
  paper.addEventListener("click", function() {
    paper.classList.toggle("header-special");
    userChoice = "paper";
    output.innerHTML = "You  Chose Paper";
    compareWithComputer("paper");
  });
  
  var scissors = document.querySelector("#scissors header");
  scissors.addEventListener("click", function() {
    scissors.classList.toggle("header-special");
    userChoice = "scissors";
    output.innerHTML = "You  Chose Scissors";
    compareWithComputer("scissors");
  });
  
  var stone = document.querySelector("#stone header");
  stone.addEventListener("click", function() {
    stone.classList.toggle("header-special");
    userChoice = "stone";
    output.innerHTML = "You  Chose Stone";
    compareWithComputer("stone");
  });
  
  // Computer choice
  
  function compareWithComputer(userChoice) {
    var computerChoice = Math.floor(Math.random() * 3 + 1);
    if (computerChoice == 1) {
      computerChoice = "Stone";
    } else if (computerChoice == 2) {
      computerChoice = "Paper";
    } else {
      computerChoice = "Scissors";
    }
  
    var results = compare(userChoice, computerChoice);
  
    output.innerHTML +=
      ". Computer Chose " +
      computerChoice +
      results;
    result.innerHTML = "user " + countUser + "computer" + countComputer;
  }
  // Compare userChoice and computerChoice
  var compare = function(choice1, choice2) {
    if (choice1 === choice2) {
      return "It's a tie!";
    }
    if (choice1 === "stone") {
      if (choice2 === "scissors") {
        // stone wins
        countUser++;
        return "You win!";
  
      } else {
        // paper wins
        countComputer++;
        return "You lose! Try again.";
  
      }
    }
    if (choice1 === "paper") {
      if (choice2 === "stone") {
        // paper wins
        countUser++;
        return "You win!";
  
  
      } else {
        // scissors wins
        countComputer++;
        return "You lose! Try again.";
  
      }
    }
    if (choice1 === "scissors") {
      if (choice2 === "stone") {
        // stone wins
        countComputer++;
        return "You lose! Try again.";
  
      } else {
        // scissors wins
        countUser++;
        return "You win!";
  
      }
    }
  };</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;div class="start" &lt;h1&gt;Click the button, start the game!&lt;/h1&gt;
  &lt;/div&gt;
  &lt;div class="game" id="paper"&gt;
    &lt;header&gt;Paper&lt;/header&gt;
  
  &lt;/div&gt;
  &lt;div class="game" id="scissors"&gt;
    &lt;header&gt;Scissors&lt;/header&gt;
  &lt;/div&gt;
  &lt;div class="game" id="stone"&gt;
    &lt;header&gt;Stone&lt;/header&gt;
  &lt;/div&gt;
  &lt;div id="output"&gt;&lt;/div&gt;
  &lt;div id="result" &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>