Ошибка "Uncaught TypeError: Cannot read properties of null (reading 'style')" означает, что выражение слева от .style вернуло null — то есть элемент не найден — и вы пытаетесь прочитать/изменить свойство у несуществующего объекта.
Наиболее частые причины и способы исправления
1) Скрипт выполняется до того, как DOM создан
- Скрипт подключён в <head> или вверху body и обращается к элементам, которых ещё нет в документе.
- Решения:
- Переместить <script> ... </script> прямо перед </body>.
- Или добавить атрибут defer при подключении внешнего файла: <script src="app.js" defer></script>.
- Или обернуть код в обработчик DOMContentLoaded:
document.addEventListener('DOMContentLoaded', () => {
// работа с элементами
});
Пример:
Ошибка:
const el = document.getElementById('my'); // null, т.к. элемент ещё не создан
el.style.display = 'none';
Правильно:
document.addEventListener('DOMContentLoaded', () => {
const el = document.getElementById('my');
el.style.display = 'none';
});
2) Неправильный селектор / опечатка id/class
- Убедитесь, что в HTML элемент имеет именно тот id или класс, который вы ищете.
- Проверьте регистр символов — id чувствителен к регистру при поиске в JS соответствия строке.
- Проверьте, что вы используете document.getElementById('id'), document.querySelector('.class') и т.д. корректно.
3) Элемент реально отсутствует в текущем документе (удалён динамически)
- Возможно, элемент создаётся позже, или был удалён. Нужно управлять порядком создания/манипуляций.
4) Защититься от null (на время отладки)
- Можно проверять существование перед доступом:
const el = document.getElementById('my');
if (el) {
el.style.display = 'none';
} else {
console.warn('Элемент #my не найден');
}
- Или использовать optional chaining (если поддерживается):
document.getElementById('my')?.style.display = 'none';
5) Если ошибка в модуле или при использовании iframe / shadow DOM — учтите контекст поиска элементов.
Короткий чек-лист для отладки
- Откройте DevTools → Console — смотрите строку ошибки (какая строка файла).
- Вставьте console.log(document.getElementById('...')) перед проблемной строчкой, чтобы увидеть, null или нет.
- Проверьте HTML — есть ли элемент с таким id/классом.
- Переместите скрипт вниз или используйте defer/DOMContentLoaded.
Если вы пришлёте конкретный фрагмент вашего кода (HTML + JS, где отмечены ошибочные строки), я подскажу точный фикс.