Не удается прочитать свойство ‘addEventListener’ из null
Я должен использовать ванильный JavaScript для проекта. У меня есть несколько функций, одна из которых-кнопка, которая открывает меню. Он работает на страницах, где существует целевой идентификатор, но вызывает ошибку на страницах, где идентификатор не существует. На тех страницах, где функция не может найти идентификатор, я получаю ошибку «не могу прочитать свойство ‘addEventListener’ of null», и ни одна из моих других функций не работает.
Ниже приведен код для кнопки, которая открывает меню.
Как справлюсь ли я с этим? Мне, вероятно, нужно все обернуть этот код в другую функцию или использовать оператор if/else, чтобы он только искал идентификатор на определенных страницах, но точно не уверен.
10 ответов:
Я думаю, самый простой подход будет просто проверить, что el не является нулем перед добавлением прослушивателя событий:
кажется, document.getElementById(‘overlayBtn’); возвращается null потому что он выполняется до полной загрузки DOM.
если вы поместите эту строку кода под
затем он будет работать без проблем.
Я столкнулся с аналогичной ситуацией. Вероятно, это связано с тем, что скрипт выполняется до загрузки страницы. Поместив скрипт в нижней части страницы, я обошел проблему.
Я получал ту же ошибку, но выполнение нулевой проверки, похоже, не помогло.
решение, которое я нашел, заключалось в том, чтобы обернуть мою функцию внутри прослушивателя событий для всего документа, чтобы проверить, когда DOM закончил загрузку.
Я думаю, это потому, что я использую фреймворк (угловой), который динамически изменяет мои классы HTML и идентификаторы.
спасибо @Rob M. за его помощь. Вот как выглядел последний блок кода:
Я просто добавил «асинхронный» к моему тегу скрипта, который, похоже, исправил проблему. Я не уверен, почему, если кто-то может объяснить, но это сработало для меня. Мое предположение заключается в том, что страница не дожидаясь скрипта для загрузки, так что страница загружается в то же время, как JavaScript.
как говорили другие проблема заключается в том, что скрипт выполняется до загрузки страницы (и в частности целевого элемента).
но мне не нравится решение о дозаказе содержание.
предпочтительным решением является размещение обработчика событий на странице onload event и установка там прослушивателя. Это обеспечит загрузку страницы и целевого элемента до выполнения назначения. например,
у меня есть коллекция цитат вместе с именами. Я использую кнопку обновить, чтобы обновить последнюю цитату, связанную с определенным именем, но при нажатии кнопки Обновить он не обновляется. Я включаю код ниже для сервера.js-файл и внешний js-файл (main.js).
главная.js (внешний js)
сервер.js file
это связано с тем, что элемент не был загружен в то время, когда выполнялся пакет js.
добавить все прослушиватели событий при загрузке окна.Работает как шарм, независимо от того, где вы ставите теги script.
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 скрипт, при этом в консоли сразу показывается ошибка.
Почему рабочий элемент может отсутствовать
Как исправить ошибку
Ошибку исправить довольно просто, для этого нужно проверить правильность всех ID элементов на странице и работающих с ними скриптов. В случаях, если нужный селектор отсутствует, нужно также отключать и обрабатывающий его скрипт, при этом появление данной ошибки будет исключено. По логике вещей отключение скрипта также будет более правильным решением при отсутствии селектора и необходимости выполнения данного скрипта, ведь зачем нужен лишний код на странице?
При создании сайтов и работе с любыми скриптами необходимо уделять большое внимание каждым мелочам, а также уметь работать с ID элементов. Наиболее распространенные ошибки чаще всего появляются именно из-за невнимательности. Надеемся, что данный материал окажется Вам полезен и поможет решить проблему, при этом сэкономив огромное количество времени!
Cannot Read Property ‘addeventlistener’ of Null
The method addEventListener() is used in conjunction with EventTarget, which is a Document Object Model (DOM) implementation that can receive events like click, mouseover, submit, keydown, drag, and more. Events can be thought of as the interaction a user has with the web page or document.
- Career Karma matches you with top tech bootcamps Get exclusive scholarships and prep courses
- Career Karma matches you with top tech bootcamps Get exclusive scholarships and prep courses
Unlike the value of undefined, the null value can be a value assigned on purpose by developers into their programs. It represents the absence of any value or object. It is a primitive and falsy value.
In this article, we’ll dive into why developers may receive this error when coding.
Why the Error of Null is Triggered
An event listener was added to the image of the ship on the website below. We should be seeing a blue dotted border around the image upon clicking it, but instead we receive the ‘Cannot read property ‘addEventListener’ of null’ error in the console.
- Career Karma matches you with top tech bootcamps Get exclusive scholarships and prep courses
Misspelling the name of the class when invoking the querSelector() method could be the reason why. Remember that the value of null means the absence of a value or object. By calling on a value that doesn’t exist the error of null will appear.
An example to be used inside the invocation is (‘.insertClassName’) when calling the name of the class or (‘#insertIdName’) when calling the name of the id. Forgetting to do so will result in the same error.
The image of the example website above is a representation of the following markup and JavaScript code.
Career Karma entered my life when I needed it most and quickly helped me match with a bootcamp. Two months after graduating, I found my dream job that aligned with my values and goals in life!
Venus, Software Engineer at Rockbot
Find Your Bootcamp Match
Career Karma entered my life when I needed it most and quickly helped me match with a bootcamp. Two months after graduating, I found my dream job that aligned with my values and goals in life!
Venus, Software Engineer at Rockbot
Find Your Bootcamp Match
Notice when we invoke the querySelector method, we are calling on the class ‘.content-dest’ when ‘.content-dest’ does not exist in the HTML. If we would have forgotten to use the dot in the class name, we would have received the same error as well.
Debugging
Conclusion
The addEventListener method is used as a way for users to interact with the web page or document. Null is the absence of a value or object. When we call on a selector that does not exist, or forget to include the dot in class name or hash symbol in id when invoking the querySelector methods, we can trigger the same error of null.
About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.
«Cannot read property ‘addEventListener’ of null»
tag by its id and then puts the result into it. var x = document.getElementById(«res»); x.innerHTML = result >);»>my code is presenting to me this error in the title the code : //gets the element vel by its id and sets it to a variable var vel = document.getElementById(«vel»); vel.addEventListener(«click», function() < //gets these 2 elements by thier ids var d = document.getElementById("d"); var t = document.getElementById("t"); //sets the result var var result = d / t; //get the
tag by its id and then puts the result into it. var x = document.getElementById(«res»); x.innerHTML = result >);
It’s just bcz your JS gets loaded before the HTML part and so it can’t find that element. Just put your whole JS code inside a function which will be called when the window gets loaded. You can do like this is your JS window.onload= function ()< //Your entire JS code here >
It means there’s no element with id «vel» Maybe check your html
In addition to what Flandre Scarlet said, make sure you are accessing the element after it has been created in the DOM. Something like document.onload would do the trick.
replying to shashi ranja: thanks a lot
It is because the variable is not defined yet. You probably have not saved the html yet or have not defined it yet.
Как исправить ошибку Uncaught TypeError: Cannot read property ‘style’ of null?
Я написал код который изменяет цвет меню в зависимости от позиции на странице
Код работает пока я не добавляю:
После чего выдает ошибку
index.html:352 Uncaught TypeError: Cannot read property ‘style’ of null
2 ответа 2
пробуйте заменить на:
и если можно пример залить на тот же CodePen, для ясности. Данная ошибка говорит вам что свойства style у объекта null нет.
Следующая проверка бессмысленна,
Всё ещё ищете ответ? Посмотрите другие вопросы с метками javascript jquery или задайте свой вопрос.
Связанные
Похожие
Подписаться на ленту
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
дизайн сайта / логотип © 2021 Stack Exchange Inc; материалы пользователей предоставляются на условиях лицензии cc by-sa. rev 2021.9.16.40224
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.