Задать вопрос
@Percivald
javascript

Последовательность чтения кода браузером?

Почему в console.log(planet) отображается версия содержимого тега с id="greenplanet" Red Alert: hit by phaser fire!, хотя команда .innerHTML находится в скрипте после console.log(planet), то есть по идее должно выводится <p id="greenplanet">All <em>is</em> well</p>

"<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Planets</title>
        <script>
            function init() {
            var planet = document.getElementById("greenplanet");
            console.log(planet );
            planet.innerHTML = "Red Alert: hit by phaser fire!";
        }
            window.onload = init;
        </script>
    </head>
    <body>
        <h1>Green Planet</h1>
        <p id="greenplanet">All <em>is</em> well</p>
        <h1>Red Planet</h1>
        <p id="redplanet">Nothing to report</p>
        <h1>Blue Planet</h1>
        <p id="blueplanet">All systems A-OK</p>
    </body>
</html>"
  • Вопрос задан
  • 746 просмотров
2 комментария
Подписаться 4 Простой 2 комментария
Решения вопроса 1
Vindicar
@Vindicar
RTFM!
Percivald, ты не понимаешь.
Тут три действия, а не два.
1. Запланировать показ текущего значения изменяемого объекта planet (console.log() делает именно это!)
2. Изменить значение объекта planet
И спустя некоторое (пусть и небольшое) время
3. Отобразить текущее значение изменяемого объекта planet.
Не важно, в каком порядке выполняются 1 и 2, к момент выполнения 3 значение planet уже будет изменено.

А вот если выводить строку, например, innerHTML, ситуация изменится, потому что строки не изменяемы!
И тогда будет так:
1. Запланировать показ объекта-строки, которая в настоящий момент находится в объекте planet.
2. Сменить содержимое planet на другое. Старая строка при этом не пропадает, так как её показ уже запланирован. Про новую строку консоль ничего не знает.
И спустя время
3. Показать в консоли запланированный объект-строку.

Иными словами, в первом случае содержимое объекта planet читается на шаге 3, где оно уже изменилось. Во втором случае, значение строки, которую мы взяли из planet, тоже читается на шаге 3 - но тот факт, что внутри planet эта строка была заменена на другую, ни на что не влияет.

Вот, на пальцах:
Вариант 1
611443763c478362532846.png

Вариант 2
6114439e7363a433817881.png
Ответ написан
1 комментарий
1 комментарий
Пригласить эксперта
Ответы на вопрос 2
delphinpro
@delphinpro Куратор тега JavaScript
frontend developer
в консольку отправляются не значения переменных а ссылки на них. И там показывается то, что есть на тот момент, когда ты решишь посмотреть выведенное.
Ответ написан
3 комментария
3 комментария
@maya042
HTML,CSS,JS,React
Интересно, если поставить задержку, то в консоли остается первое значение.
Видимо пока console.log еще выполняется, но не вывел значение, начинает выполняться изменение innerHTML, которое заканчивается раньше, чем console.log вывел значение.
<script>
            function init() {
            var planet = document.getElementById("greenplanet");
            console.log(planet );
            setTimeout(() => {
            	planet.innerHTML = "Red Alert: hit by phaser fire!";	
            },1000);
        }
            window.onload = init;
</script>
Ответ написан
1 комментарий
1 комментарий
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
JavaScript разработчик
SummerWeb • Ярославль
от 100 000 до 140 000 ₽
JavaScript Fullstack
OnClass
от 200 000 до 600 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Довести разработку flutter приложения до логичного конца
23 апр. 2024, в 09:24
15000 руб./за проект
SMM для HR
23 апр. 2024, в 08:58
15000 руб./за проект
[python] протестировать function calling у gpt-4 и у claude 3 opus
23 апр. 2024, в 08:50
200 руб./за проект
Ещё заказы