当用户每次进入时，猜测游戏创建新数字

Question

好的，我有一个问题，你们可能想尝试弄清楚。这个节目应该说：“你猜对了！”当用户输入正确的数字时，但似乎每次我猜，它正在创建一个新的数字供该人弄清楚。

这是我的小提琴： https://jsfiddle.net/hmzzg90c/

这是我的代码：

$(document).ready(function () {
    $("#chat-box").append("<div><br>What's your guess?</div>");
});

document.getElementById('number').addEventListener('keydown', function (event) {


    if (event.which === 13 || event.keyCode === 13) {
        var guess = this.value;




        //do { 
        var number = Math.round((Math.random() * 100)) % 100 + 1;
            if (guess == number) {
                $("#chat-box").append("<div>" + guess + "</div>");
                $("#chat-box").append('<div class="human">' + guess + '</div>');
                $("#chat-box").append('<div class="comp">You guessed it!</div>');
            } else if (isNaN(guess)) {
                $("#chat-box").append('<div class="human">' + guess + '</div>')
                $("#chat-box").append('<div class="comp">' + guess + ' is not a guess. Try again.</div>');
            }
            else if (guess == 0) {
                $("#chat-box").append('<div class="human">' + guess + '</div>')
                $("#chat-box").append('<div class="comp">' + guess + ' is not a valid guess. Try again.</div>');
            } else if (guess < number) {
                $("#chat-box").append('<div class="human">' + guess + "</div>")
                $("#chat-box").append('<div class="comp">' + guess + " is too small, guess again.</div>");
            } else if (guess > number) {
                $("#chat-box").append('<div class="human">' + guess + "</div>")
                $("#chat-box").append('<div class="comp">' + guess + " is too big, guess again.</div>");
            } 
        }
    //} while (guess != number);
});

哦，我也有do-while loof注释掉了，因为每次运行页面时都会破坏代码。我该如何解决这个问题？

Answer 1

var number = Math.round((Math.random() * 100)) % 100 + 1;包含在您的事件侦听器中，并且每次用户提交猜测时都会运行。

这让游戏变得非常非常困难。 ： - ）

为什么不利用一个闭包来做这样的事情：

var number = Math.round((Math.random() * 100)) % 100 + 1;

document.getElementById('number').addEventListener('keydown', function (event) {
    if (event.which === 13 || event.keyCode === 13) {
    var guess = this.value;

        if (guess == number) {
            $("#chat-box").append("<div>" + guess + "</div>");
            $("#chat-box").append('<div class="human">' + guess + '</div>');
            $("#chat-box").append('<div class="comp">You guessed it!</div>');
        } else if (isNaN(guess)) {
            $("#chat-box").append('<div class="human">' + guess + '</div>')
            $("#chat-box").append('<div class="comp">' + guess + ' is not a guess. Try again.</div>');
        }
        else if (guess == 0) {
            $("#chat-box").append('<div class="human">' + guess + '</div>')
            $("#chat-box").append('<div class="comp">' + guess + ' is not a valid guess. Try again.</div>');
        } else if (guess < number) {
            $("#chat-box").append('<div class="human">' + guess + "</div>")
            $("#chat-box").append('<div class="comp">' + guess + " is too small, guess again.</div>");
        } else if (guess > number) {
            $("#chat-box").append('<div class="human">' + guess + "</div>")
            $("#chat-box").append('<div class="comp">' + guess + " is too big, guess again.</div>");
        } 
    } 
});

现在，您只需计算一次这个数字，而不是每次猜测一次。

Answer 2

您的代码存在很多问题。

必须在事件监听器之外声明
1. number。
2. 不需要do-while循环，因为每次用户按下某个键时都会触发事件侦听器。
3. 您需要在页面呈现后添加事件侦听器。

您可以在 updated JSFiddle 中看到这一点。或者通过扩展和执行下面的代码片段。

＆＃13;
＆＃13;
$(document).ready(function() {
  $("#chat-box").append("<div><br>What's your guess?</div>");

  var number = Math.round((Math.random() * 100)) % 100 + 1;

  $('#number').on('keydown', function(event) {
    if (event.which === 13 || event.keyCode === 13) {
      var guess = this.value;
      if (guess == number) {
        $("#chat-box").append("<div>" + guess + "</div>");
        $("#chat-box").append('<div class="human">' + guess + '</div>');
        $("#chat-box").append('<div class="comp">You guessed it!</div>');
      } else if (isNaN(guess)) {
        $("#chat-box").append('<div class="human">' + guess + '</div>')
        $("#chat-box").append('<div class="comp">' + guess + ' is not a guess. Try again.</div>');
      } else if (guess == 0) {
        $("#chat-box").append('<div class="human">' + guess + '</div>')
        $("#chat-box").append('<div class="comp">' + guess + ' is not a valid guess. Try again.</div>');
      } else if (guess < number) {
        $("#chat-box").append('<div class="human">' + guess + "</div>")
        $("#chat-box").append('<div class="comp">' + guess + " is too small, guess again.</div>");
      } else if (guess > number) {
        $("#chat-box").append('<div class="human">' + guess + "</div>")
        $("#chat-box").append('<div class="comp">' + guess + " is too big, guess again.</div>");
      }
    }
  });
});
＆＃13;
body {
  background-color: #51a858;
}
#chat-box {
  background-color: #ffffff;
  width: 350px;
  height: 450px;
  margin: 0 auto;
  position: relative;
  top: 130px;
}
input#number {
  width: 320px;
  height: 20px;
  margin: 0 auto;
  position: relative;
  left: 10px;
  top: 10px;
  border: 1px solid #000;
}
.human {
  background-color: #0026ff;
  color: white;
  text-align: right;
  margin-left: 70%;
  margin-right: 30px;
}
.comp {
  text-align: left;
}
＆＃13;
<body>
  <div id="chat-box">
    <input type="text" name="numberEntry" id="number">

  </div>
  <script src="jquery-2.2.1.js"></script>
  <script src="game.js"></script>
＆＃13;
＆＃13;
＆＃13;