Uncaught TypeError: Cannot read properties

Question

Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') at script.js:4:6.

const hamb = document.querySelector("#hamb");
const popup = document.querySelector("#popup");

hamb.addEventListener("click", hambHandler);

function hambHandler(e) {
    e.preventDefault();
    popup.classList.toggle("open");
}

@media(max-width: 768px) {

    .top {
        padding-top: 0;

    }

    .navbar {
        width: 100%;
        height: 60px;
        border-radius: 0;
    }

    .navbar__wrap .menu {
        display: none;
    }

    .hamb {
        display: flex;
        align-items: center;
        padding-left: 30px;
    }

    .hamb__field {
        padding: 14px 20px;
        cursor: pointer;
    }

    .bar {
        display: block;
        width: 30px;
        height: 3px;
        margin: 6px auto;
        background-color: #fff;
        transition: 0.2s;
    }

    .logo {
        padding: 6px 0px 0px 269px;
    }

    .popup {
        position: fixed;
        top: 80px;
        left: -100%;
        width: 100%;
        height: 100%;
        background-color: #fff;
        z-index: 100;
        display: flex;
        transition: 0.3s;
    }

    .popup.open {
        left: 0;
    }
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Четыре лапы</title>
    <script src="script.js"></script>
</head>

<body>
    <div class="top">
        <nav class="navbar">
            <div class="container">
                <div class="navbar__wrap">
                    <div class="hamb">
                        <div class="hamb__field" id="hamb">
                            <span class="bar"></span>
                            <span class="bar"></span>
                            <span class="bar"></span>
                        </div>
                    </div>
                    <img class="logo" id="logo" src="img/logo.svg" alt="">
                    <ul class="menu" id="menu">
                        <li class="menu-list"><a class="menu-list__text" href="#">о приюте</a></li>
                        <li class="menu-list"><a class="menu-list__text" href="#">питомцы</a></li>
                        <li class="menu-list"><a class="menu-list__text" href="#">полезные советы</a></li>
                        <li class="menu-list"><a class="menu-list__text" href="#">контакты</a></li>
                    </ul>
                    <ul class="menu-media menu">
                        <li><img src="img/Instagram.svg" alt="instagram"></li>
                        <li><img src="img/vk.svg" alt="vk"></li>
                        <li><img src="img/telegram.svg" alt="telegram"></li>
                    </ul class="menu-media">
                </div>
            </div>
        </nav>
        <div class="popup" id="popup"></div>

Пытаюсь делать по видео бургер-меню. Вроде бы написал все в js точь-в-точь, но все равно не хочет работать, на 4 по 6 строке выдаёт ошибку. Я профан в js, поэтому не понимаю, из-за чего проблема.

БЛОГ НА HUSL

Uncaught TypeError: Cannot read properties

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