JavaScript OnClick 方法

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 时，此循环保持运行ning。因此，如果我选择了不正确的数字，则意味着我的浏览器崩溃。

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
   }

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

还要尽量使间距和大括号的位置保持一致。

do{
//Stuff
}

和

do
{
//Stuff
}

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

count = count + 1

此处的一个小疏忽是计数从 0 开始。因此，当您尝试猜中数字时，它会说您已猜中 0 次。

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

     }

前面的所有代码将一直执行到bool 变为true。这里的问题是，如果我输入了错误的号码（或无效号码）。该程序将保持运行ning if 语句，这需要大量的计算机能力，因为它永远不会停止。无法改变你的猜测，页面崩溃，因为浏览器卡在了while循环中。

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

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

JavaScript OnClick 方法

JavaScript OnClick Method

javascript

onclick

button

onclicklistener