При выводе переменной из HTML выдаёт null

Question

Имеется HTML конструкция:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style.css">
    <script src="skript.js"></script>
</head>
<body>
<div class="header">
    <h1>My Website</h1>
    <p>Resize the browser window to see the effect.</p>
</div>

<div class="topnav" >
    <nav class="nav" >
        <a class="nav__link" href="#">Link</a>
        <a class="nav__link" href="#">Link</a>
        <a class="nav__link" href="#">Link</a>
        <a class="nav__link" href="#" style="float:right">Link</a>
    </nav>
</div>

<div class="row">
    <div class="leftcolumn">
        <div class="card">
            <h2>TITLE HEADING</h2>
            <h5>Title description, Dec 7, 2017</h5>
            <div class="fakeimg" style="height:200px;">Image</div>
            <p>Some text..</p>
            <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
        </div>
        <div class="card">
            <h2>TITLE HEADING</h2>
            <h5>Title description, Sep 2, 2017</h5>
            <div class="fakeimg" style="height:200px;">Image</div>
            <p>Some text..</p>
            <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
        </div>
    </div>
    <div class="rightcolumn">
        <div class="card">
            <h2>About Me</h2>
            <div class="fakeimg" style="height:100px;">Image</div>
            <p>Some text about me in culpa qui officia deserunt mollit anim..</p>
        </div>
        <div class="card">
            <h3>Popular Post</h3>
            <div class="fakeimg"><p>Image</p></div>
            <div class="fakeimg"><p>Image</p></div>
            <div class="fakeimg"><p>Image</p></div>
        </div>
        <div class="card">
            <h3>Follow Me</h3>
            <p>Some text..</p>
        </div>
    </div>
</div>

<div class="footer">
    <h2>Footer</h2>
</div>



</body>
</html>

В JS пишу:

const header = document.querySelector(".header")

console.log(header)


window.addEventListener("scroll", function () {
    header.classList.add('newColor');
})

И в браузере выдаёт null. Что делать помогите?

Answer 1

Ваша ошибка возникает из-за того, что на момент выполнения скрипта, дерево DOM еще не готово, соответственно элемента еще нет.

Вариант 1:
Подключить скрипт перед закрывающим тегом </body>.

<script src="skript.js"></script>
</body>

Вариант 2: Указать для <script> атрибут defer.

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

БЛОГ НА HUSL

При выводе переменной из HTML выдаёт null

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