Beginner - document.write in while loop

Question

I'm trying to make a program where the user guesses a number from 1 to 100. You get 10 guesses and, the program should tell the user if his/hers guess is too high or too low along the way, however the program does not write on the document until all 10 guesses are used. How can I get around this?

Here is my code:

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

doc.write is stone-age technology, with very very few uses on a modern web page. don't use it to "scribble" on a page. use other stuff, like `document.getElementById(...).innerHTML += 'hi mom'` — Marc B, Oct 18 '16 at 19:02
*Note:* Be careful of `document.write()` in general, it should only be used before the DOM is fully parsed. Not that it should never be used, rather that it's often used incorrectly. — Spencer Wieczorek, Oct 18 '16 at 19:03
Also since your `prompt` shows up immediately after calls to `document.write` it is going to pause rendering the writes until it has time, which is not until your loop is finished — Patrick Evans, Oct 18 '16 at 19:04
`prompt` is a function that stops code execution. Because of that the JavaScript did not render the HTML yet. — Spencer Wieczorek, Oct 18 '16 at 19:05

score 1 · Accepted Answer · edited May 23 '17 at 10:32

Pro-tip: don't use document.write.

Now, the reason you aren't seeing anything is, basically, the browser is either in JavaScript mode or rendering mode. As long as some JavaScript is running, the DOM is not going to be rendered. That way if you make multiple changes to the DOM, the browser doesn't waste resources on rendering all of the little changes in between.

A better way of handling this would be with a button and some kind of input.

// 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>

You can figure out the actual logic of the guessing game yourself ;)

Note: *"There's actually nothing wrong with `document.write`, per se. The problem is that it's really easy to misuse it."* — Spencer Wieczorek, Oct 19 '16 at 04:01

score 0 · Answer 2 · answered Oct 18 '16 at 19:38

As others have suggested, you should avoid using document.write() in real-world applications, as there are more effective ways of adding elements to a page.

To answer your question: you don't see the page update while you're repeatedly submitting your guesses because the browser is still evaluating your while() loop, and deferring the re-rendering of the visible page until the while loop terminates.

The most direct way to achieve what you're asking, without changing much of your code, would be to substitute your while loop with an interval, such that your code executes asynchronously and doesn't block the browser from updating the rendered page. (Because of its blocking nature, confirm() (like other methods like alert()) is probably not the best choice for this interaction.)

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

Beginner - document.write in while loop

2 Answers2