Javascript-форум - непонятное поведение InnerHTML

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - непонятное поведение InnerHTML (https://javascript.ru/forum/misc/73100-neponyatnoe-povedenie-innerhtml.html)

непонятное поведение InnerHTML

Дело вот в чем. Есть конструктор Tank, который в зависимоит от переданного параметра name создает два вида танков (Т34 и Тигр). Тигр выступает в качестве мишени, который Т34 расстреливает. При нажатии на кнопку "Атаковать" запускается цикл while, в котором пока Тигр не будет уничтожен танк Т34 ведет по нему огонь. Очки прочности Тигра отображаются в элементе div, который расположен рядом с картинкой Тигра. Вот функция атаки танка

Tank.prototype.attack = function(target) {
 if (target == Tiger){
    target.hp = target.hp - this.damage;
  tooltipElemTiger.innerHTML = target.hp;
  alert(this.name + " атаковал " + target.name);
  alert("Очков прочности " + target.name + target.hp + " единиц");
  if (target.hp <= 0) this.destroyed(target);}
};

По идее после каждого выстрела параметр InnerHTML должен обновляться и отображать количество оставшихся единиц прочности танка. НО он обновляется только ПОСЛЕ того, как Тигр уничтожен, а не после каждого выстрела. Сломал всю голову но так и непойму проблемы. Если в функции battle убрать цикл и просто несколько раз прописать функцию атаки, то всё работает корректно (див обновляет оставшуюся прочность после каждого выстрела). Значит проблема именно в циклическом выполнении функции.

Вот ссылка на кодпен, чтобы наглядно всё было видно. Не обращайте внимания, что не всё ровно, пока интересует только функциональная часть. https://codepen.io/Sergeev2/pen/qxLXzB

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script>
document.body.style.backgroundColor = "red";
alert();
	</script>
</body>
</html>

Известная проблема

Вместо while рекурсивный setTimeout и все заработает

А с чем связана такая непонятная работа скрипта? По идее команды должны выполняться одна за другой, а не как попало

Цитата:

Сообщение от Самовар

По идее команды должны выполняться одна за другой

Они так и выполняются.

Самовар,
Это не какая то ошибка языка, интерпретатор так настроен у хрома и браузеров сделанных на его основе.

в примере Жоника, сперва вывелся алерт, а потом изменился цвет. Как-то не очень одна за другой, если я правильно понял

Цитата:

Сообщение от Самовар

Наверное твой скрипт "крутится" в одном потоке... И пока он не завершит работу никакого "обновления" страницы ты не увидишь.
Это хорошо видно на примере j0hnik.

Тебе нужно все изменения страницы "уводить" в другой поток.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script>
document.body.style.backgroundColor = "red";
setTimeout(function(){
   alert();
},1);
	</script>
</body>
</html>

Цитата:

Сообщение от Самовар

в примере Жоника, сперва вывелся алерт, а потом изменился цвет.

Алерт обрабатывается именно так браузерами. :)

про криво работающт экплорер наслышан, но с гуглом думал всё нормально. То есть и для гугла нужно применять специфичекие приемы?