addEventListener is not a function [duplicate]

Question

hi i am trying to close the divs using the close click.. here is the code

var closeIcon=document.getElementsByClassName('.monique-close-icon');  

    function closeBigImgAndContainer()
{
    MoniqueDiv.style.display= "none";
    currentBigImageToDisplay.style.display="none";
};

closeIcon.addEventListener("click", closeBigImgAndContainer);

But in console there is an error Uncaught TypeError: closeIcon.addEventListener is not a function(anonymous function) @ main.js:14 Please tell me where i am doing it wrong...Thanks.

See this fiddle for a working example of what you're trying to do. jsfiddle.net/vhe17shd — idream1nC0de
– idream1nC0de, Commented Aug 22, 2015 at 2:43

syazdani · Accepted Answer · 2015-08-22 02:43:15Z

26

getElementsByClassName returns an array of elements, addEventListener exists on elements.

The fix would be to iterate over the result set from getElementsByClassName and call addEventListener on each item:

var closeIcons=document.getElementsByClassName('.monique-close-icon');  

function closeBigImgAndContainer()
{
    MoniqueDiv.style.display= "none";
    currentBigImageToDisplay.style.display="none";
};

for (i = 0; i < closeIcons.length; i++) {
    closeIcons[i].addEventListener("click", closeBigImgAndContainer);
}

edited Aug 22, 2015 at 2:43

answered Aug 22, 2015 at 2:39

syazdani

4,8781 gold badge29 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

idream1nC0de Over a year ago

In addition to your answer, the selector is also wrong.

Cloudboy22 Over a year ago

@Syadani I added and id and it worked. Thanks.,

j08691 Over a year ago

Technically it returns a collection, which is array-like.

MaxZoom · Accepted Answer · 2018-08-06 13:21:44Z

3

It looks like the closeIcon variable has undefined value.
It is because getElementsByClassName(..) method takes the class name as its parameter.

You can try to fix it as below:

var closeIcons = document.getElementsByClassName('monique-close-icon');
var i = closeIcons.length;
while (i--)
  closeIcons[i].addEventListener("click", closeBigImgAndContainer);

Also the method getElementsByClassName(..) returns a collection of nodes, not a single element. To assign an event listener we need to loop that collection and assign event to each DOM element in it.

edited Aug 6, 2018 at 13:21

answered Aug 22, 2015 at 2:40

MaxZoom

7,7635 gold badges30 silver badges45 bronze badges

3 Comments

idream1nC0de Over a year ago

You're right that the selector is wrong, but the issue is that you cannot call the addEventListener on a collection of elements.

idream1nC0de Over a year ago

What if he wanted to attach event handlers to all of the elements?

idream1nC0de Over a year ago

I believe he was attempting to add the same event listener to all the elements with one method, which is not possible, seeing as how the collection does not have a method with that name.

idream1nC0de · Accepted Answer · 2015-08-22 02:47:13Z

2

Firstly, your selector is wrong. It should look like this:

var closeIcon = document.getElementsByClassName('monique-close-icon');

Then you need to append the event handlers as if you were dealing with an Array, as the .getElementsByClassName() method returns a collection of elements.

var closeIcon = document.getElementsByClassName('monique-close-icon'); 
function closeBigImgAndContainer(e)
{
    MoniqueDiv.style.display= "none";
    currentBigImageToDisplay.style.display="none";
};

for (var i = 0; i < closeIcon.length; i++) {
   closeIcon[i].addEventListener('click', closeBigImgAndContainer); 
}

Here's a working example: http://jsfiddle.net/vhe17shd/

answered Aug 22, 2015 at 2:47

idream1nC0de

1,1895 silver badges13 bronze badges

Collectives™ on Stack Overflow

addEventListener is not a function [duplicate]

3 Answers 3

3 Comments

3 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

3 Comments

Comments

Linked

Related