title: JavaScript - rock, paper, scissors - user input is not acknowledged
body: <p>i recently started learning JavaScript and been working on the final assignment for the class where we have to create a "Rock, Paper, Scissors" game. While i did manage to solve the same type of a game at codecademy.com - it was mostly with the help of several If Statements and 1 function. However, for this assignment we're required to use functions, arrays and loops, while keeping a score of each player's progress, notifying the user of the updated scores, as well providing the chance to exit the game at any time... here's the detailed explanation of what's required for this assignment:</p>
  
  <blockquote>
    <p>Write a Rock, Paper, Scissors game. Your task is to create the logic
    for a Rock, Paper Scissors game. The game will welcome a user and then
    prompt the user for their first round of play by asking them to type
    rock, paper or scissors Each round will have the following steps:</p>
    
    <ol>
    <li>The user will be prompted to type, rock, paper, scissors OR exit</li>
    <li>The computer will randomly pick either rock, paper or scissors
        and alert the user to this choice</li>
    <li>A winner will be declared and a point will be awarded to the winner.</li>
    <li>The user will be alerted of the running score for both themselves and the computer.</li>
    <li>The round will be repeated</li>
    </ol>
    
    <p>You are to evaluate whether or not the user wins, loses or ties the
    round, based on the rules here:
    <a href="http://www.rinkworks.com/games/rps.shtml" rel="nofollow">http://www.rinkworks.com/games/rps.shtml</a> The game should have an
    infinite number of rounds, until the user types exit in the game
    prompt. If the user types the word exit into a prompt, let the user
    know who won the game and the final score. I will ultimately leave the
    architecture of the program up to you, but do require that: ￼You will
    need to incorporate conditionals, loops, arrays and make use of
    function calls and ￼comments to create this program.
    - the computer creates a new random choice between rock, paper and scissors by calling a function you create to return either
    “rock”,”paper”,”scissors”
    - the logic for determining a winner of a round is contained inside a function you design to take both the user and computer’s choice as
    parameters</p>
  </blockquote>
  
  <p>I checked this in Chrome's console for errors and the problem that i'm having is that the code seems to work... only that it's the computer that's the only winner here... hence it seems as if the user input is completely ignored. Besides, if i hit the 'Cancel' button i get an error (according to Chrome's console) on line 20 telling me: </p>
  
  <blockquote>
    <p>Cannot read property 'toLowerCase' of null</p>
  </blockquote>
  
  <p>...I've originally added the following line of code for a reason, which is to make sure the user input matches all the lower-case options...</p>
  
  <pre><code>return userInput.toLowerCase();
  </code></pre>
  
  <p>When i removed the .toLowerCase() method only to simply return the userInput (and then ran the code in Chrome's console again), i got stuck in an infinite loop... </p>
  
  <p>Here's my entire code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var choice1Score = 1;
  var choice2Score = 1;
  
  function compChoice() {
   var choiceArr = ["rock", "paper", "scissors"]; 
   var random = choiceArr[Math.floor(Math.random() * 3)];
   return random;
  }
  
  function userChoice(){
   var userInput = prompt("Please enter your choice of either rock, paper or scissors. To exit, hit the 'Cancel' button.");
   return userInput.toLowerCase();
  }
  
  
  while (userChoice != "Cancel") {
  
      function scoring(choice1, choice2) {
          if (choice1 === choice2) {
              return "The result is a tie.";
          } if (choice1 === "rock") {
              if (choice1 === "scissors") {
                  return "Rock wins. Your score is: " + choice1Score++;
              } else {
                  return "Paper wins. The computer's score is: " + choice2Score++;
              }
          } if (choice1 === "paper") {
              if (choice1 === "rock") {
                  return "Paper wins. Your score is: " + choice1Score++;
              } else {
                  return "Scissors win. The computer's score is: " + choice2Score++;
              }
          } if (choice1 === "scissors") {
              if (choice1 === "paper") {
                  return "Scissors win. Your score is: " + choice1Score++;
              } else {
                  return "Rock wins. The computer's score is: " + choice2Score++;
              }
          }
      }
      alert(scoring(userChoice(), compChoice()));
  
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Any help, suggestions and comments will be much appreciated!</p>