Ошибка Cannot read properties of null

Справочник · JavaScript · 2 минуты чтения

Ошибка значит: свойство или метод берут у значения null — то есть у элемента, которого скрипт не нашёл. В скобках указано, что именно пытались прочитать:

Текст

Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')

Здесь document.querySelector(...) или getElementById(...) вернул null, а на нём вызвали addEventListener. Так ошибка звучит в Chrome и Edge; в Firefox текст другой, со словами is null. Похожая Cannot set properties of null — когда свойству null пытаются присвоить значение.

Как найти причину

Откройте страницу с ошибкой, в консоли (F12 → Console) наберите поиск элемента из своего кода — например, document.querySelector("#send") — и нажмите Enter.

Элемент нашёлсяскрипт выполнился раньше, чем появился элемент

Самая частая причина. Скрипт стоит в <head> без defer, браузер выполняет его сразу, а <body> ещё не прочитан. К моменту, когда вы набираете команду в консоли, страница уже загружена, поэтому там элемент находится.

Решение — атрибут defer:

HTML

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

Или перенесите тег <script> в конец <body>, перед </body>. Если код написан прямо в странице (без src), defer не действует — оберните код в обработчик события DOMContentLoaded:

JavaScript

document.addEventListener("DOMContentLoaded", () => {
  const button = document.querySelector("#send");
  button.addEventListener("click", () => {
    console.log("Нажато");
  });
});

Дальше: «То же самое с undefined»

Ответ nullтакого элемента на странице нет

Селектор не совпадает с разметкой

Опечатка или другой регистр: id="Send" и getElementById("send") — разные имена.
В querySelector для id нужна решётка, для класса — точка: querySelector("#send"), querySelector(".menu").
В getElementById решётки нет: getElementById("send"). С решёткой он ищет id="#send" и не находит.

Элемент есть только на другой странице

Один файл скрипта подключён ко многим страницам, а кнопка есть только на одной. На остальных querySelector возвращает null. Проверяйте перед использованием:

JavaScript

const form = document.querySelector("#order-form");
if (form) {
  form.addEventListener("submit", (event) => {
    event.preventDefault();
    console.log("Заказ отправлен");
  });
}

Короткая запись того же — form?.addEventListener(...). Но не ставьте ?. везде подряд: настоящую ошибку в селекторе она тоже молча спрячет.

То же самое с undefined

Cannot read properties of undefined (reading 'name') — свойство читают у undefined. Обычно это элемент массива за его пределами, свойство, которого нет у объекта, или данные с сервера другого вида, чем ожидалось:

JavaScript

const users = [{ name: "Аня" }];

try {
  console.log(users[1].name);
} catch (err) {
  console.log(err.message);
}
console.log(users[1]?.name);

Вывод

Cannot read properties of undefined (reading 'name')
undefined

Выведите значение перед проблемной строкой — console.log(users) — и посмотрите, что в нём на самом деле.