Видимость функций и блоков в JavaScript

Question

Суть вопроса:

Имеется два скрипта: head.js и body.js, которые вызываются, в соответствии со своим названием, в конце <head> и в конце <body>. В head.js содержится функция quote(text), которая должна менять содержимое блока с id="quote". Вызывается эта функция в body.js, но происходит ошибка: Uncaught TypeError: Cannot set properties of null (setting 'innerText') - т.е. блок для этой функции не виден. Прошу объяснить почему работает так, как оно работает, и не сильно пинать увечного (В js я дилетант с минимальным опытом).

Просто в том же head.js имеется другая функция, которая также меняет содержимое страницы (блока <main>), но вызывается уже изнутри самого <main> по onclick="...", и с ней всё работает идеально, а тут мне не понятно, что происходит, т.к. эта функция вызывается даже уже после нужного ей блока и должна его видеть, но null, однако...

Код:

head.js

function quote(text) {
    document.querySelector("#quote").innerText = text;
}

body.js

quote("Какой-то текст...");

index.html

<!DOCTYPE html>
<html>

<head>
    <script src="./head.js"></script>
</head>

<body>
    <header>
        <div id='head'><div id="quote"></div></div>
    </header>
    <main>
    </main>
    <script src="./body.js"></script>
</body>

</html>

Answer 1

Прошу объяснить почему работает так, как оно работает

Проиллюстрирую ответ примером с комментариями. Надеюсь, что будет понятно.

<script>
function quote(text) {
  document.querySelector("#quote").innerText = text;
}
/*
Это работать не будет, т.к. еще нет нужного элемента
quote('Ok')
*/
// Вот так будет работать
document.addEventListener('DOMContentLoaded', _ => quote('Ok'))
</script>
<p id='quote'></p>
<!-- Это работает, т.к. на момент нажатия на кнопку уже все элементы есть на странице --->
<button onclick='quote("Тест")'>Тест</button>

Вот твой пример...

<!DOCTYPE html>
<html>

<head>
<script>
function quote(text) {
  document.querySelector("#quote").innerText = text;
}
</script>    
</head>

<body>
    <header>
        <div id='head'><div id="quote"></div></div>
    </header>
    <main>
    </main>
<script>
quote('Ok')
</script>
</body>

</html>

Все там работает.

Значит ты не все рассказал нам про формирование твоей страницы. Возможно твой контент так же создается динамически. Т.о. возможно, что на момент вызова функции элементов еще нет на странице.

БЛОГ НА HUSL

Видимость функций и блоков в JavaScript

Ответы (1 шт):