empty basket
Ваша корзина пуста
Выберите в каталоге интересующий товар
и нажмите кнопку «В корзину».
Перейти в каталог
empty delayed
Отложенных товаров нет
Выберите в каталоге интересующий товар
и нажмите кнопку
Перейти в каталог
Заказать звонок
+7 (499) 408 08 75
г. Люберцы, Октябрьский пр-т, 111/119
пн-пт: 10:00-18:00
Заказать звонок

Uncaught typeerror: cannot read property 'addeventlistener' of null

3 ноя 2022
В процессе создания сайтов и работы с jQuery многие сталикаются с ошибкой Uncaught typeerror: cannot read property 'addeventlistener' of null и чаще всего на решение данной проблемы уходит несколько часов или дней, что существенно влияет на сроки выполнения задачи. В нашем случае мы столкнулись с данной ошибкой при работе с подгрузкой данных через InfiniteScroll, но также данная ошибка может встречаться и в других случаях. 
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 скрипт, при этом в консоли сразу показывается ошибка. 

1495810173_snimok-ekrana-2017-05-26-v-17_30_41.png

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

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

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

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

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