Функция prompt не дает обновлять значение

104
30 мая 2021, 11:50

На изображении представлена фраза и снизу должны появляться буквы после каждого ввода в диалоговое окно prompt. Но почему-то этого не происходит, после prompt нажимаешь OK и не добавляет, запускает следующий prompt и так до конца. И только после последнего успешного prompt появляется фраза полностью.

let words = [ 
  "программа", 
  "макака", 
  "прекрасный", 
  "оладушек" 
]; 
 
let word = words[Math.floor(Math.random() * words.length)]; 
let par = document.getElementById("word"); 
let wordSave = []; 
 
for (let i = 0; i < word.length; i++) { 
  wordSave[i] = "_"; 
  par.innerHTML = wordSave.join(" "); 
} 
 
window.onload = function() { 
  let a = 0; 
  let shot = 5; 
  while (shot > 0) { 
    let letter = prompt("Угадай букву!" + "Осталось " + shot + " попыток"); 
 
    if (letter == null) break; 
 
    if (letter.length == 1) { 
      let count = 0; 
 
      for (let i = 0; i < word.length; i++) { 
        if (letter === word[i]) { 
          if (wordSave.indexOf(word[i]) == -1) alert("Угадал букву!"); 
          wordSave[i] = word[i]; 
          console.log(wordSave); 
          par.innerHTML = wordSave.join(" "); 
 
          if (wordSave.indexOf(word[i]) == -1) alert("Угадал букву!"); 
        } else count++; 
      } 
      if (wordSave.indexOf("_") === -1) { 
        alert("Слово угадано"); 
        break; 
      } 
      if (count === word.length) { 
        alert("Нет такой буквы"); 
        shot--; 
      } 
      a++ 
    } else { 
      alert("Ошибка. Попробуйте еще раз"); 
    } 
  } 
} 
console.log(word);
<h1>Угадайте слово</h1> 
<p id="word"></p>

Кстати на IE должным образом работает, а в Chrome не работает.

Answer 1

Так и должно быть. Циклы выполняются за один кадр. То есть вы не даёте случиться отрисовке кадра. Для этого нужна какая-то асинхронная задача, а ваш код весь синхронный. Например вместо while после каждого ответа на вопрос сделайте setTimeout, который вызывает прежнюю функцию через 0 секунд. Тогда синхронность разорвётся и у браузера появится шанс отрисовать кадр.

READ ALSO
Как хранить иерархичные данные в списке

Как хранить иерархичные данные в списке

Есть классДанные я получаю из Excel файла, пробегаясь по разным листам

93
Как сложить два многочлена разной длины

Как сложить два многочлена разной длины

В общем, есть функция с перегруженным оператором сложенияЕсли степень многочленов одинаковая, то всё считает спокойно, но если степень многочленов...

96
Как правильно использовать SecureString?

Как правильно использовать SecureString?

Например, нужно захешировать пароль методом string CalculateHash(string source)Но если я вытяну значение строки с SecureString в виде экземпляра класса string и передам...

101
Когда и как включается DI в asp netcore

Когда и как включается DI в asp netcore

В описаниях DI для asp netcore пишут, что настройка выполняется в ConfigureServices() класса Startup

91