addEventListener to many elements selecting them with class

Question

I dont understand why when i click those elements with class click-to-open this function below does not work im trying to make something like a javascript accordion

document.getElementsByClassName('click-to-open').addEventListener('click', function(){
                document.getElementsByClassName('click-to-open').style.maxHeight = '40px';
                this.style.maxHeigh = '500px';
            });

Because getElementsByClassName return an array of elements, even if this is one, you need use event delegation for save resources and better performance, here and [article](https://davidwalsh.name/event-delegate) — dexhering, Feb 04 '16 at 01:23

Yehia Awad · Answer 1 · 2016-02-04T00:19:27.670

1

Try this one :

var clickToOpen=document.getElementsByClassName('click-to-open');

for(var i=0;i<clickToOpen.length;i++){
     clickToOpen[i].addEventListener('click', function(){
                        this.style.maxHeight = '500px';
                    });
}

The method getElementsByClassName() always returns a set of class array, if you want to target all the DOM elements you need to iterate through all of them, if you were using Jquery there is a much more elegant way to do it.

This is a demo: https://jsfiddle.net/2tx2s3rz/2/ showing the code

edited Feb 04 '16 at 00:19

answered Feb 04 '16 at 00:02

Yehia Awad

2,898
1
20
31

it still does not work and i want to attach this event listener to all elements with this class not just the first – Georgi Antonov Feb 04 '16 at 00:05
@Georgi Antonov Try it now – Yehia Awad Feb 04 '16 at 00:07
its not allowed for me to use Jquery otherwise i would do it just vanilla javascript and cant get it work. Your new code still does not work – Georgi Antonov Feb 04 '16 at 00:11
https://jsfiddle.net/2tx2s3rz/ look at the jsfiddle it works – Yehia Awad Feb 04 '16 at 00:13
@Georgi Antonov I have made changes to the code you can retry now I didn't notice you were calling the document.getElementsByClass() inside the eventListener – Yehia Awad Feb 04 '16 at 00:32

addEventListener to many elements selecting them with class

1 Answers1