Question

我在创建游戏时学习的OnClick方法遇到了问题。每当我输入值并单击按钮时，它就会陷入循环，我尝试使用document.write并使用它，但它会打开一个新页面，而不是显示在屏幕上。

我是编程社区的新手，所以任何帮助都会很好。

<body>
  <p>Enter an integer between 1-100 here:
    <input id="number" type="text" />
  </p>
  <p>
    <button onclick="onclickFunction()" type="button">Enter</button>
  </p>
  <p id="result"></p>

  <script type="text/javascript">
    function onclickFunction() {
      var a = Math.random();
      var b = a * 100;
      var c = Math.ceil(b);
      var intNumber;
      var count = 0;
      var bool = false;

      do {
        do {
          intNumber = document.getElementById("number").value;

        }
        while (intNumber > 100 || intNumber < 0);
        if (intNumber > c) {
          document.getElementById("result").innerHTML = "Too High " + "</br>";
          bool = false
        } else if (intNumber < c) {
          document.getElementById("result").innerHTML = "Too Low " + "</br>";
          bool = false
        } else if (intNumber == c) {
          document.getElementById("result").innerHTML = "You Win!" + "<br>" + " It took    you " + count + " tries";


          bool = true
        }
        count = count + 1
      } while (bool !== true);
      document.getElementById("result").innerHTML = "Win!";

    }
  </script>

</body>

更新：

<script type="text/javascript">

            // Declare all your functions first
            // These functions expect no parameters and return values.

                function onclickFunction() 
                {

                    var a = Math.random();
        var b = a * 100;
        var c = Math.floor(b);
                    // Input from text box.
                    var randomNumber = document.getElementById("number").value; 

                    // Output to paragraph.

                        if (randomNumber < c && randomNumber != c)
                        {
                              document.getElementById("result").innerHTML = "Too Low " + "</br>";
                        }
                        else if (randomNumber > c  && randomNumber != c )
                        {
              document.getElementById("result").innerHTML = "Too High" + "</br>";
                        }


                    else if (randomNumber == c)
                    {
      document.getElementById("result").innerHTML = "Win!";
                    }

                    // Clear text box for further input.
                    document.getElementById("name").value = ""; 
                } 
        </script>
        <p>Enter an integer between 1-100 here: <input id="number" type="text" /></p>
        <p><button onclick="onclickFunction()" type="button">Enter</button></p>
        <p id="result"></p>
    </body>

Answer 1

首先，创建fiddle总是有用的。这样，正在阅读您问题的人可以立即运行您的代码。

让我们分解代码

  var a = Math.random();
  var b = a * 100;
  var c = Math.ceil(b);

这可以在一行中完成，以保存变量。

  do
  {
  intNumber = document.getElementById("number").value; 

  }
  while (intNumber > 100 || intNumber < 0);

我不是那种以这种方式使用do / while循环的忠实粉丝，虽然当你想像现在一样至少运行一次do代码时它会派上用场。

当数字大于100或小于0时，此循环继续运行。因此，如果我选择的数字不正确，则意味着我的浏览器崩溃。

if (intNumber>c){
   document.getElementById("result").innerHTML = "Too High " + "</br>"; 
  bool = false
   }else if (intNumber<c){
  document.getElementById("result").innerHTML = "Too Low " + "</br>"; 
   bool = false
   }else if (intNumber == c){
   document.getElementById("result").innerHTML = "You Win!" + "<br>" + " It took    you " + count + " tries"; 


  bool = true
   }

首先，您要检查猜测是否大于答案，而不是更小。这意味着最后一次检查它是否相等是不必要的，因为这是唯一的选择。你可以在这里使用其他人。

同时尝试与您的间距以及放置大括号的位置保持一致。

do{
//Stuff
}

和

do
{
//Stuff
}

这两种方法都是使用括号的有效方式，但坚持使用一种风格，否则您的代码会变得太混乱。

count = count + 1

这里的一个小疏忽是计数从0开始。所以当你在一次尝试中猜出数字时，它会说你已经在0次尝试中完成了。

while (bool !== true);
    document.getElementById("result").innerHTML = "Win!"; 

     }

所有以前的代码都将完成，直到bool变为真。这里的问题是，如果我输入了错误的数字（或无效的数字）。该程序将继续运行if语句，因为它永远不会停止，需要大量的计算机电源。不可能改变你的猜测和页面崩溃，因为浏览器停留在while循环中。

最简单的解决方案是在玩家输入新号码时计算新猜测是否正确。所以当再次调用onClickFunction时。这样你就不必使用while循环了。虽然你必须在其他地方计算随机数。

我希望有帮助，如果您有任何问题请告诉我！

JavaScript OnClick方法

1 个答案: