Почему не существует объекта addEventListener?

Question

[Артём]

Не могу сделать простейший обработчик событий.
Облазил все сайты. Везде пишут, что нужно делать через addEventListener:

var btn = document.querySelector("button");
btn.addEventListener('click', function() {
    console.log("OK");
}

Но мне в консоли высвечивает:

script.js:5 Uncaught TypeError: btn.addEventListener is not a function
    at script.js:5

Answer 1

[Алексей Уколов]

В переменной btn у вас не DOM-элемент, а что-то иное. И у этого чего-то нет метода addEventListener.

Глядя в документацию мы видим, что querySelector возвращает DOM-элемент или null:

Document метод querySelector() возвращает первый элемент (Element) документа, который соответствует указанному селектору или группе селекторов. Если совпадений не найдено, возвращает значение null.

https://developer.mozilla.org/ru/docs/Web/API/Docu...

Следовательно, у вас проблема с селектором. В приведённом коде он берётся из какой-то переменной. Возможно, вы хотели написать там строку "button"?

Comments

[Артём]

В смысле не DOM-элемент? Я пытался ставить
var btn = document.querySelector('.get-res');
Всё равно не работает((

[Алексей Уколов]

Ну вот моё подозрение и подтвердилось - вы не оборачиваете строки селектора в кавычки.

[Артём]

Алексей Уколов, обернул, но все равно не работает...

[Алексей Уколов]

Покажите код на jsfiddle.

[Алексей Уколов]

Ещё один вариант - вы пытаетесь найти элемент в DOM до того, как он был туда добавлен.

[dev null]

Артём Тюрин, ну возможно у вас скрипт отрабатывает до того как DOM загрузился. Проблема именно в селекторе, там не кнопка

[Артём]

Я не знаю как делиться кодом в jsfiddle.
Поэтому вот: https://jsfiddle.net/ZiEnTenIn/3rmq1tcs/
Может получится)

[Алексей Уколов]

Ну так вы же querySelecorAll используете, а не querySelector, как в вопросе. Этот метод возвращает коллекцию элементов и по ней нужно итерировать, чтобы каждому элементу добавить обработчик.

Answer 2

[Stalker_RED]

Для начала, addEventListener - это не объект, а метод, который есть у объектов, поддерживающих интерфейс EventTarget.

Он у вас не найден потому, что в переменной btn содержится что-то другое, не поддерживающее такой метод.

Если вы проверите что там в этой переменной, то узнаете, что там скорее всего null.

И останется только догадаться почему он там. (Подсказка: скорее всего вы ищете кнопку на странице еще ДО того как страница загрузилась)

Comments

[Артём]

Я не знаю как посмотреть, что находится в переменной...
И скрипт подключен в самом конце страницы.

[Stalker_RED]

Артём Тюрин, в хрое и фаерфоксе отличные дебаггеры
https://developers.google.com/web/tools/chrome-dev...

Ну или можно как в прошлом тысячелетии, вписать

console.log(btn)
console.log(typeof btn)

[Stalker_RED]

Артём Тюрин,

Поэтому вот: https://jsfiddle.net/ZiEnTenIn/3rmq1tcs/

А ничего, что у тебя здесь в примере querySelector, а там в jsfiddle querySelectorAll?
Они какбэ отличаются.
Один дает ссылку на dom-элемент, а другой возвращает NodeList, у которого нет метода addEventListener, он же не элемент, а список элементов.