Ошибка addEventListener null в autocomplete.js: карта ПВЗ СДЭК белая
При интеграции модуля ms_cdek2 многие разработчики сталкиваются с ошибкой в консоли браузера: Uncaught (in promise) TypeError: Cannot read properties of null (reading 'addEventListener') в файле autocomplete.js. В результате карта пунктов выдачи СДЭК не загружается и отображается как белый квадрат. Разберём причины и способы исправления.
Почему возникает ошибка Cannot read properties of null?
Ошибка Cannot read properties of null (reading 'addEventListener') означает, что скрипт пытается назначить обработчик события (addEventListener) элементу DOM, который ещё не существует на странице. В контексте модуля ms_cdek2 это происходит, когда JavaScript код пытается найти элемент #autocomplete-input или подобный, но его нет в момент выполнения скрипта.
Основные причины:
- Порядок загрузки: скрипт выполняется до того, как DOM полностью загружен.
- Отсутствие элемента: HTML-структура не содержит нужного поля ввода или контейнера для автодополнения.
- Конфликт версий: несовместимость библиотек или устаревший код autocomplete.js.
- Неверные селекторы: скрипт ищет элемент по ID или классу, которые не соответствуют разметке.
Как исправить ошибку с addEventListener null?
Для устранения проблемы выполните следующие шаги:
1. Оберните инициализацию в DOMContentLoaded
Убедитесь, что весь код, работающий с DOM, запускается после загрузки документа. В файле mscdek.js измените инициализацию:
document.addEventListener('DOMContentLoaded', function() {
// ваш код инициализации msCDEK
});Это гарантирует, что все элементы HTML уже существуют.
2. Проверьте наличие элемента autocomplete
Откройте исходный код страницы и убедитесь, что присутствует элемент с ID autocomplete-input или классом, который ищет скрипт. Если его нет - добавьте в шаблон:
<input type="text" id="autocomplete-input" placeholder="Введите город">3. Обновите модуль ms_cdek2
Скачайте последнюю версию модуля с официального сайта или репозитория. Старые версии могут содержать устаревшие скрипты, несовместимые с современными браузерами.
4. Проверьте консоль на другие ошибки
Иногда ошибка в autocomplete.js - следствие другой проблемы (например, не загрузился API Яндекс.Карт или jQuery). Посмотрите полный стек ошибок и убедитесь, что все внешние ресурсы подключены корректно.
Частые вопросы по ошибке autocomplete.js
Ниже приведены ответы на популярные вопросы, которые помогут быстрее решить проблему.