Почему идет ошибка like.addEventListener is not a function?

Question

Есть такой код и он работает:

function openLikeBlock() {
  var like = document.getElementById("like");
  like.addEventListener('click', function (e) {
    e.preventDefault();
    if (!this.classList.contains('open'))
      this.classList.add('open');
    else
      this.classList.remove('open');
  });
}

Но если добавить ClassName то будет ошибка:

var like = document.getElementsByClassName("like");

Uncaught TypeError: like.addEventListener is not a function

Мне нужно именно класс, так как таких блоков несколько на странице (поэтому использую this)

Вопрос: как сделать, что бы я мог получать элемент по классу, а не ID?

уже был очень похожий вопрос http://ru.stackoverflow.com/questions/532134/%D0%9F%D0%BE%D1%87%D0%B5%D0%BC%D1%83-%D0%BD%D0%B5-%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%B0%D0%B5%D1%82-innerhtml/532135#532135 — Grundy, Jul 10 '16 at 14:21

score 19 · Accepted Answer · answered Jul 10 '16 at 14:18

19

Потому что getElementsByClassName возвращает коллекцию элементов, а у коллекции нет метода addEventListener

для решение можно просто пробежаться по возвращенной коллекции. например так:

[].forEach.call(like,function(el){
    el.addEventListener('click', function (e) {...})
});

answered Jul 10 '16 at 14:18

Grundy

81,538

1

Добавлю к ответу, что удобнее использовать метод(ы) querySelector / querySelectorAll да и поддержка браузерами получше. – Deonis Jul 10 '16 at 14:21
Спасибо, всегда выручаете) – Nikita Shchypylov Jul 10 '16 at 14:26
@Deonis, querySelector - не коллекция :) – Jan 20 '17 at 13:55
@Other, вы забыли добавить: "Ваш К.О." :D – Deonis Jan 20 '17 at 14:01
@Deonis, Минутка педантичности :) – Jan 22 '17 at 02:44
Array.from(like, el => el.addEventListener('click', e => {...})); - ES6 – YozhEzhi Mar 10 '17 at 21:21
@Deonis, с чего бы у qsa поддержка лучше? Они по другой причине лучше. – Qwertiy Aug 24 '17 at 12:41

Почему идет ошибка like.addEventListener is not a function?

1 Answers1

Linked

Related