Javascript: Crash when variable is assigned by user's input

I can't seem to understand why this keeps crashing if I assign the user's input to the variable 'fingers'. I've tested each part of the code, by alerting, and everything seems to work ok. I've also found that if I assign a number to the variable in the script, it works just fine.

I thought that it might be that the input value was being read as string, hence would never be equal to a number when compared, and it was making the script go into an infinite loop. So I've assigned the input box as type:number, and it still crashes.

Thoughts anyone?

<html>

        <head>
            <title> How Many Fingers - Computer Guesser </title>
        </head>

        <body>

            <h1> How many fingers? </h1>

            <input id='fingersInput' type='number' min='1' max='10' placeholder="Insert the number of fingers here." /> 

            <button id='check'> Go! </button>

            <hr> </hr>
            <p id='computerGuessesOutput'> </p>
            <p id='allguessesOutput'> </p>

        <script type='text/javascript'>

            document.getElementById('check').onclick = function() {

                var fingers = document.getElementById('fingersInput').value;

                //var fingers = 5;

                var computerGuesses = Math.floor(Math.random() * 11);

                var numberOfGuesses = 1;

                var allguesses = [computerGuesses];

                while (fingers !== computerGuesses) {
                    computerGuesses = Math.floor(Math.random() * 11);

                    numberOfGuesses++;

                    allguesses.push(computerGuesses);

                        }

                document.getElementById('computerGuessesOutput').innerHTML = numberOfGuesses;
                document.getElementById('allguessesOutput').innerHTML = allguesses;

            }



        </script>

        </body>
    </html>

Solution

When you compare using !==, it does not only compare by value, but by type, in this case, finger is a string, while computerGuesses is a number.

You could either convert 'fingers' to number first, using parseInt(), or compare using !=

You can see this more clearly printing the type in the console. Check this out:

document.getElementById('check').onclick = function() {
  var fingers = document.getElementById('fingersInput').value;
  var computerGuesses = Math.floor(Math.random() * 11);
  var numberOfGuesses = 1;
  var allguesses = [computerGuesses];
  console.log(fingers, computerGuesses);
  console.log(typeof fingers, typeof computerGuesses);

}

<html>

  <head>
    <title> How Many Fingers - Computer Guesser </title>
  </head>

  <body>

    <h1> How many fingers? </h1>

    <input id='fingersInput' type='number' min='1' max='10' placeholder="Insert the number of fingers here." />

    <button id='check'> Go! </button>

    <hr> </hr>
    <p id='computerGuessesOutput'></p>
    <p id='allguessesOutput'></p>
  </body>
</html>