Guide-Group. » Блог компании » Статьи о веб-разработке » Uncaught typeerror: cannot read property 'addeventlistener' of null

Uncaught typeerror: cannot read property 'addeventlistener' of null

Написал Александр, 26.05.2017
В процессе создания сайтов и работы с jQuery многие сталикаются с ошибкой Uncaught typeerror: cannot read property 'addeventlistener' of null и чаще всего на решение данной проблемы уходит несколько часов или дней, что существенно влияет на сроки выполнения задачи. В нашем случае мы столкнулись с данной ошибкой при работе с подгрузкой данных через InfiniteScroll, но также данная ошибка может встречаться и в других случаях. 



Что может вызвать ошибку Uncaught typeerror: cannot read property 'addeventlistener' of null

Появление ошибки в нашем случае обнаружено при загрузке второй страницы контента с помощью навигации InfiniteScroll. Ввиду того, что в подгружаемом контейнере присутствует скрипт подсчета цены на странице, вызываемый ID элемента при этом отсутствовал. То есть ошибка возникает именно из-за отсутствующего элемента, который вызывал вложенный JS скрипт, при этом в консоли сразу показывается ошибка. 

Почему рабочий элемент может отсутствовать

Это очередной случай, когда внимательность играет очень большую роль. В нашем случае мы получили ошибку по той причине, что у нас срабатывал скрипт реагирующий на изменение селектора <select>. Так как товаров на странице множество, каждому селектору присвоен уникальный идентификатор (ID), с которым в том числе взаимодействовал подготовленный нами jquery скрипт. В одном из товаров селектор отсутствовал вообще, т.к. там нет вариантов выбора каких-либо опций товара, но скрипт при этом был подключен и искал селектор, что и вызвало появление ошибки на странице. В других случаях данная ошибка может возникать при неправильном формировании ID и указании ID элементов в рабочих скриптах.

Как исправить ошибку

Ошибку исправить довольно просто, для этого нужно проверить правильность всех ID элементов на странице и работающих с ними скриптов. В случаях, если нужный селектор отсутствует, нужно также отключать и обрабатывающий его скрипт, при этом появление данной ошибки будет исключено. По логике вещей отключение скрипта также будет более правильным решением при отсутствии селектора и необходимости выполнения данного скрипта, ведь зачем нужен лишний код на странице?

При создании сайтов и работе с любыми скриптами необходимо уделять большое внимание каждым мелочам, а также уметь работать с ID элементов. Наиболее распространенные ошибки чаще всего появляются именно из-за невнимательности. Надеемся, что данный материал окажется Вам полезен и поможет решить проблему, при этом сэкономив огромное количество времени!
4 137

Похожее

Не отображаются категории opencart

Бывает при переносе сайта или восстановлении базы данных у вас не отображаются категории opencart движка и при этом присутствует их навигация. Если у Вас именно тот случай, то мы сможем Вам помочь и восстановить категории. Почему не отображаются категории opencart

Подробнее
Вирус DLE — как определить?

Самые популярные движки сайтов (CMS) имеют интерес для различных вирусов, т.к. они рассчитаны на массы. Возьмем в пример систему управления сайтом Datalife Engine (dle) где вирус чаще всего имеет определенный вид, разумеется скрытый. Но как определить, есть ли на Вашем

Подробнее

На сайте размещена информация о нашей деятельности, наших проектах, а также проектах разработанных на заказ. Данная информация защищена авторским правом. Копирование или цитирование информации с сайта guide-group.ru разрешено только с указанием активной гиперссылки на страницу-источник информации.