Beginner - document.write in while loop

Question

Я пытаюсь создать программу, в которой пользователь угадывает число от 1 до 100. Вы получаете 10 догадок, и программа должна сообщать пользователю, если его/ее предположение слишком велико или слишком низко по пути, однако программа не записывается в документ до тех пор, пока не будут использованы все 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

Pro-наконечник: 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);