Why is the error like.addEventListener is not a function?

Question

There is such a code and it works:

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'); }); }

But if you add a ClassName, then there will be an error:

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

Uncaught TypeError: like.addEventListener is not a function

I need exactly the class, since there are several such blocks on the page (therefore I use this )

Question: how to do, so that I could receive an element by class, and not ID?

already had a very similar question ru.stackoverflow.com/questions/532134/…

Grundy grundy 58.6k 7 49 93 · Accepted Answer · 2016-07-10T14:18:11

Because getElementsByClassName returns a collection of elements, and the collection does not have an addEventListener method

for solution, you can simply run through the returned collection. like this:

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

I will add to the answer that it is more convenient to use the method (s) of querySelector / querySelectorAll and even better browser support.

Why is the error like.addEventListener is not a function?

1 answer 1

More articles: