Подписка
Подписка на новости, нововведени, акции и полезные статьи Получать новости и персональные скидки от Guide-Group. на почту:

 

Uncaught typeerror: cannot read property 'addeventlistener' of null


В процессе создания сайтов и работы с 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 элементов. Наиболее распространенные ошибки чаще всего появляются именно из-за невнимательности. Надеемся, что данный материал окажется Вам полезен и поможет решить проблему, при этом сэкономив огромное количество времени!