Javascript：通过用户输入分配变量时崩溃

Question

我似乎无法理解，如果我将用户的输入分配给变量 'fingers'，为什么会一直崩溃。我已经通过警报测试了代码的每个部分，一切似乎都正常。我还发现，如果我在脚本中为变量分配一个数字，它就可以正常工作。

我认为可能是输入值被读取为字符串，因此在比较时永远不会等于数字，这使脚本进入无限循环。所以我把输入框指定为type:number，它仍然崩溃。

有人有想法吗？

<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>

Answer 1

当你使用!==比较时，它不仅按值比较，而且按类型比较，在这种情况下，finger是一个字符串，而computerGuesses是一个数字。

您可以先使用 parseInt() 将 'fingers' 转换为数字，或者使用 !=

进行比较

你可以更清楚地看到在控制台中打印类型。检查一下：

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>

Answer 2

首先它是一个输入，所以你会得到它作为文本，就像你说的那样。 type 属性用于显示和验证，它始终是一个字符串，因为您想要一个数字，所以您应该执行 parseInt 将结果转换为整数。

然后，您不检查手指值是否在随机范围内（在您的示例中为 1-11），因此超出此范围的任何数字都会导致无限循环。

Javascript：通过用户输入分配变量时崩溃

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

javascript

crash

loops

user-input