Question

我试图创建一个程序，用户猜到1到100之间的数字。你得到10个猜测，程序应告诉用户他/她的猜测是否过高或过低但是，在使用所有10个猜测之前，程序不会在文档上写入。我怎么能绕过这个？

这是我的代码：

＆＃13;

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;
}

＆＃13;

Answer 1

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

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

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

＆＃13;

// 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;
});

＆＃13;

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

＆＃13;

你可以自己弄清楚猜谜游戏的实际逻辑;）

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

2 个答案: