13

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

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?

1

1 ответ 1

20

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

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

[].forEach.call(like,function(el){
    el.addEventListener('click', function (e) {...})
});
7
  • 1
    Добавлю к ответу, что удобнее использовать метод(ы) querySelector / querySelectorAll да и поддержка браузерами получше.
    – Deonis
    10 июл 2016 в 14:21
  • Спасибо, всегда выручаете) 10 июл 2016 в 14:26
  • @Deonis, querySelector - не коллекция :)
    – user207618
    20 янв 2017 в 13:55
  • @Other, вы забыли добавить: "Ваш К.О." :D
    – Deonis
    20 янв 2017 в 14:01
  • @Deonis, Минутка педантичности :)
    – user207618
    22 янв 2017 в 2:44

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.