Ошибка «Cannot read properties of null» при вызове addEventListener может возникать по двум основным причинам: 1

1. Обращение к методу addEventListener() для элемента, который не существует в DOM. 12 Например, если использовать идентификатор, который не присутствует в DOM, метод getElementById вернёт null. 1
2. Вставка тега сценария JS выше HTML, где объявлены элементы DOM. 1 В этом случае скрипт будет запущен до того, как будут объявлены элементы DOM, к которым он должен иметь доступ. 1

Чтобы решить проблему, можно попробовать следующее:

• Проверить существование элемента DOM перед вызовом addEventListener() с помощью оператора if. 1 Также можно использовать оператор необязательного связывания (?.). 12
• Разместить тег сценария JS в нижней части тега body. 1 Он должен быть размещён после объявления элементов HTML. 1
• Использовать событие DOMContentLoaded. 12 Оно запускается, когда HTML-документ полностью проанализирован и все сценарии загружены и выполнены. 1