Javascript数字猜谜游戏 - 设置计数器和while循环答案

【问题标题】：Javascript number guessing game - setting up the counter & while loopJavascript数字猜谜游戏 - 设置计数器和while循环
【发布时间】：2016-03-21 09:57:51
【问题描述】：

我正在尝试用 Javascript 创建一个随机数猜谜游戏，它将用户输入与使用 math.random 方法生成的数字进行比较。我对如何以正确的方式设置计数器感到困惑。我必须验证这个数字，用“太高”、“太低”或“你赢”来显示每个猜测，然后在最后显示“秘密”数字。不知道我做错了什么！现在它正在覆盖每个答案，并且计数器保持在#5。

function myFunction() {
    var userInput = document.getElementById("text").value;
    // test for valid input number from 1 to 999 
    if (userInput < 0 || userInput > 999) {
         alert("Your number must be from 1 to 999");
    } else {
        alert("Input OK");
    } // end function myFunction

    var randomNum = Math.floor(Math.random()* 999)+1;
    var userInput = document.getElementById("text").value;
    var counter = 0;
    var totalGuesses = 0;
    while (totalGuesses <= 5) {
      counter++;
      document.getElementById('loopResults').innerHTML = "<p>You have made" + counter + "guesses</p>";
      if (userInput < randomNum) {
          document.getElementById('loopResults').innerHTML += "<p>Your guess is too low!</p>";
      } else {
          document.getElementById('loopResults').innerHTML += "<p>Your guess is too high!</p>";
      } 
   }
}
</script>
</head>


<body>
<h1>Guessing Game</h1>
<p id="loopResults"></p>
<form action="" method="post" enctype="multipart/form-data" name="userData">
    <input name="userInput" id="text" type="text" size="10" /> - &nbsp;Enter a number from 1-999!</form>
    <p><span style="background-color:#066aff; color: #ffffff; padding: 5px;" onclick="myFunction();" >enter number</span>
</p>
</body>

【问题讨论】：

为什么你同时拥有counter 和totalGuesses 变量？看起来您将有一个无限循环，因为您永远不会增加 totalGuesses。此外，您永远不会测试当前猜测是否正确，您只检查它是否太低，否则假设它太高。此外，用户永远没有机会改变他们的猜测。
问题是你的while loop不依赖于点击事件，所以它一直在运行。您应该将counter++; 和totalGuesses++ 放在点击处理程序中，并检查totalGuess 不高于5
我认为这就是我感到困惑的地方......这可能应该是totalGuesses++。这超出了我的想象。 :)
啊好的...谢谢！

标签： javascript

【解决方案1】：

这里不需要while loop。发生的事情是，一旦它进入 while 循环，它会将您的 counter 增加到 5。

取出while loop，它会做你想做的事。

我认为你不需要totalGuesses

编辑：

所以我进一步研究了您的代码。为了做你想做的事，而不是把所有东西都放在你的myFunction中，下面是步骤：

创建random_number
创建counter
绑定到onclick 的函数，这是主要逻辑所在。这就是你需要做的。
1. 从输入字段中获取输入结果，并解析为Integer
2. 与存储的random_number比较
3. 如果正确，提示ok
4. 如果没有，增加counter
5. 如果counter达到限制，提醒并显示结果

不打算写代码了，我想你能想办法。

【讨论】：

itsgoingdown - 当您说在点击处理程序内部时，您的意思是 onclick="myFunction(counter++); 吗？