初学者 - while 循环中的 document.write

Question

我正在尝试制作一个程序，让用户猜测 1 到 100 之间的一个数字。您得到 10 次猜测，并且程序应该告诉用户 his/hers 猜测是否太高或太低顺便说一句，但是在使用所有 10 个猜测之前，程序不会在文档上写入。我该如何解决这个问题？

这是我的代码：

var a = Math.random();
var b = a * (101 - 1) + 1;
var c = Math.floor(b);
document.write(b + "<br>");
document.write(c + "<br>");
var d = 1;
while (gjett != c && d <= 10) {
  var gjett = Number(prompt("Gjett på et tall fra 0 til 100"));
  if (gjett < c) {
    document.write("Tallet er høyere enn " + gjett + ".<br>");
  }
  if (gjett > c) {
    document.write("Tallet er lavere enn " + gjett + ".<br>");
  }
  d = d + 1;
}

Answer 1

专业提示：don't use document.write.

现在，您看不到任何内容的原因基本上是浏览器处于 JavaScript 模式或呈现模式。只要某些 JavaScript 是运行，DOM 就不会被渲染。这样，如果您对 DOM 进行多项更改，浏览器就不会浪费资源来呈现其间的所有小更改。

处理此问题的更好方法是使用按钮和某种输入。

// Wait for the user to click on the button
document.querySelector('button').addEventListener('click', function() {
  // Get the value the user put in
  var inputEl = document.querySelector('input');
  
  // Make sure it's an integer
  var value = parseInt(inputEl.value);
  
  // Get the output element
  var outputEl = document.getElementById('output');
  
  // Tell the user what they guessed
  outputEl.innerHTML = 'You guessed ' + value;
});

<input type="text" />
<button>Try</button>
<br />
<p id="output"></p>

你可以自己摸索出猜谜游戏的实际逻辑;)

Answer 2

正如其他人所建议的那样，您应该避免在实际应用程序中使用 document.write()，因为有更有效的向页面添加元素的方法。

回答您的问题：您在重复提交猜测时看不到页面更新，因为浏览器仍在评估您的 while() 循环，并推迟重新呈现可见页面直到 while 循环终止。

在不更改大部分代码的情况下实现您所要求的最直接方法是用一个间隔替换 while 循环，这样您的代码就可以异步执行并且不会阻塞浏览器更新呈现的页面。（由于其阻塞性质，confirm()（与 alert() 等其他方法一样）可能不是此交互的最佳选择。）

var a = Math.random();
var b = a * (101 - 1) + 1;
var c = Math.floor(b);
document.write(b + "<br>");
document.write(c + "<br>");
var d = 1;

var interval = setInterval(function() {
    if (gjett != c && d <= 10) {
        var gjett = Number(prompt("Gjett på et tall fra 0 til 100"));
        if (gjett < c) {
          document.write("Tallet er høyere enn " + gjett + ".<br>");
        }
        if (gjett > c) {
          document.write("Tallet er lavere enn " + gjett + ".<br>");
        }
    } else {
    clearInterval(interval);
  }
}, 0);

初学者 - while 循环中的 document.write

Beginner - document.write in while loop

javascript

while-loop

document.write