Cannot read properties of null (reading 'addEventListener') — что это и как починить?
Делаю кнопку, в консоли красным:
Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
Вот код:
const btn = document.getElementById('start');
btn.addEventListener('click', () => alert('старт'));
Элемент с id="start" на странице есть. Почему null?
2 ответа
null означает, что getElementById('start') ничего не нашёл, и ты пытаешься повесить событие на «ничто». Причины почти всегда одна из двух:
1. Скрипт выполняется раньше, чем создан элемент. Если <script> стоит в <head> или просто выше кнопки в HTML — на момент запуска кнопки ещё нет. Перенеси скрипт в конец <body> или добавь defer к тегу <script src=...>.
2. Не совпадает id. Проверь буква-в-букву: id="start" в HTML и 'start' в JS. Регистр важен: Start ≠ start.
Чаще всего виновата причина №1. Самый надёжный вариант:
<button id="start">Старт</button>
<script src="app.js"></script>
скрипт после кнопки.
Способ быстро проверить, какая из причин: добавь перед строкой с ошибкой console.log(btn). Если в консоли null — элемент действительно не найден (id или порядок), а не сам addEventListener сломан. Так ты сразу поймёшь, куда копать.