Блог

Главная - Вопросы по программированию - Ошибка типа: Не удается прочитать свойство ‘addEventListener’ из-за ошибки null

Ошибка типа: Не удается прочитать свойство ‘addEventListener’ из-за ошибки null

#javascript

Вопрос:

Я пишу этот код для веб-сайта, но ошибка «Не удается прочитать свойство «addEventListener» null» продолжает появляться:

 const menu = document.querySelector('#mobile-menu');
const menuLinks = document.querySelector('.navbar__menu');

const mobileMenu = () => {
  menu.classList.toggle('is-active');
  menuLinks.classList.toggle('active');
};

menu.addEventListener ('click', mobileMenu);

Комментарии:

1. document.querySelector('#mobile-menu') равно нулю .. загрузите javascript ПОСЛЕ HTML (конец тега тела), а не раньше … или дождитесь запуска события DOMContentLoaded

2. Я думаю, что вы совершили ошибку новичка, поместив свой js-скрипт в головную часть HTML …

Ответ №1:

Как отметили другие в комментариях, вы ставите скрипт перед элементами, которые хотите выбрать. Чтобы иметь возможность выбирать элементы, вам нужно будет либо разместить сценарий внизу страницы, либо разместить прослушиватель для выполнения сценария при загрузке страницы.

Пример: В примере, который я публикую, вы также можете поместить свой скрипт в верхней части страницы или внизу … это просто не будет иметь значения

 <script>
    // 1. First declare the variables
    let menu, menuLinks;
    // 2. The DOMContentLoaded event fires when the initial HTML
    //    document has been completely loaded and parsed, 
    //    without waiting for stylesheets, images, and subframes to finish loading.
    window.addEventListener("DOMContentLoaded", function () {
        menu = document.querySelector('#mobile-menu');
        menuLinks = document.querySelector('.navbar__menu');
        menu.addEventListener('click', mobileMenu);
    });

    // 3. Click function
    const mobileMenu = () => {
        menu.classList.toggle('is-active');
        menuLinks.classList.toggle('active');
        console.log('Click is OK!');
    };
</script>


<button id="mobile-menu">Click me!</button>
<div class="navbar__menu"></div>

Пример 2:

По возможности следует избегать создания глобальных переменных. Так что для меня пример 2-лучшее решение.

 <script>
    window.addEventListener("DOMContentLoaded", function () {
        let menu = document.querySelector('#mobile-menu');
        let menuLinks = document.querySelector('.navbar__menu');
        menu.addEventListener('click', function () {
            menu.classList.toggle('is-active');
            menuLinks.classList.toggle('active');
            console.log('Click is OK!');
        });
    });
</script>


<button id="mobile-menu">Click me!</button>
<div class="navbar__menu"></div>
Метки: