Что за ошибка js?

Question

[DrunkDog]

Ребят, из-за чего ошибка???

(function () {
    const burger = document.querySelector('.burger');
    burger.addEventListener('click', () => {
        burger.classList.toggle('burger_active');
    });
}());

Ошибка:

"js.js:4 Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
    at js.js:4:12
    at js.js:7:2"

Пытаюсь бургер сделать

Comments

[alexalexes]

Поставьте точку останова на строку:
burger.addEventListener('click', () => {
и посмотрите, чему равен burger (там null, отсюда смысл ошибки).

Answer 1

[Алексей П]

На момент вызова IIFE `(function () {...}())` бургер ещё добавлен в DOM. Другими словами, элемента не существует, поэтому `document.querySelector('.burger')` возвращает null (читаем тут и тут).

Возможно, что к ошибке приводит "ранний" запуск скрипта.

Советую, перенести script-тег с функцией в конец body-тега.

Comments

[DrunkDog]

Перенёс, сработало

Answer 2

[Сергей delphinpro]

Переводим

Cannot read properties of null (reading 'addEventListener')
=>
Невозможно обратиться к свойству у null (обращение к 'addEventListener')

Смотрим в код
burger.addEventListener
Делаем вывод, что burger равен null
Идем выше
const burger = document.querySelector('.burger');
Видим querySelector
Читаем по нему документацию – почему это он вернул null?

Узнаем, что querySelector не нашел искомый элемент.

Бинго! Не пишем примитивный вопрос в интернетах...