Addeventlistener is not a function ошибка

I’m getting an «.addEventListener is not a function» error. I am stuck on this:

var comment = document.getElementsByClassName("button");
function showComment() {
  var place = document.getElementById('textfield');
  var commentBox = document.createElement('textarea');
  place.appendChild(commentBox);
}
comment.addEventListener('click', showComment, false);

<input type="button" class="button" value="1">
<input type="button" class="button" value="2">
<div id="textfield">
</div>

var comment = document.getElementsByClassName("button");

function showComment() {
  var place = document.getElementById('textfield');
  var commentBox = document.createElement('textarea');
  place.appendChild(commentBox);
}

for (var i in comment) {
  comment[i].onclick = function() {
    showComment();
  };
}

<input type="button" class="button" value="1">
<input type="button" class="button" value="2">
<div id="textfield"></div>

The first line of your code returns an array and assigns it to the var comment, when what you want is an element assigned to the var comment…

var comment = document.getElementsByClassName("button");

So you are trying to use the method addEventListener() on the array when you need to use the method addEventListener() on the actual element within the array. You need to return an element not an array by accessing the element within the array so the var comment itself is assigned an element not an array.

Change…

var comment = document.getElementsByClassName("button");

to…

var comment = document.getElementsByClassName("button")[0];

answered Jun 8, 2018 at 21:11

Another important thing you need to note with «.addEventListener is not a function» error is that the error might be coming a result of assigning it a wrong object eg consider

let myImages = ['images/pic1.jpg','images/pic2.jpg','images/pic3.jpg','images/pic4.jpg','images/pic5.jpg'];
let i = 0;
while(i < myImages.length){
  const newImage = document.createElement('img');
  newImage.setAttribute('src',myImages[i]);
  thumbBar.appendChild(newImage);

 //Code just below will bring the said error 
 myImages[i].addEventListener('click',fullImage);

 //Code just below execute properly 
  newImage.addEventListener('click',fullImage);




  i++;
}

In the code Above I am basically assigning images to a div element in my html dynamically using javascript. I’ve done this by writing the images in an array and looping them through a while loop and adding all of them to the div element.

I’ve then added a click event listener for all images.

The code «myImages[i].addEventListener(‘click’,fullImage);» will give you an error of «addEventListener is not a function» because I am chaining an addEventListener to an array object which does not have the addEventListener() function.

However for the code «newImage.addEventListener(‘click’,fullImage);» it executes properly because the newImage object has access the function addEventListener() while the array object does not.

For more clarification follow the link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Not_a_function

answered Apr 9, 2020 at 5:33

The main reason of this error is this line

document.getElementsByClassName("button")

Cause the getElementsByClassName returns an array-like object of all child elements or a collection of elements.

There are two possible solutions AFAIK —

1. Treat the variable containing document.getElementsByClassName("button") as an array and be specific when using an event listener.
   Example —

   comment[0].addEventListener('click' , showComment , false )

2. Use id for selecting that specific element.
   Example-

   document.getElementById('button')

answered Oct 23, 2022 at 13:59

Try this one:

var comment = document.querySelector("button");
function showComment() {
  var place = document.querySelector('#textfield');
  var commentBox = document.createElement('textarea');
  place.appendChild(commentBox);
}
comment.addEventListener('click', showComment, false);

Use querySelector instead of className

If you want to target multiple buttons and add a event listener to all you need to first target all buttons and after use loop for each button

const buttons = document.querySelectorAll(".btn");

buttons.forEach((button)=>{

button.addEventListener("click",()=>{
    console.log("clicked")
})

})

answered Apr 26 at 14:47

08 июн. 2023, в 22:08

50000 руб./за проект

08 июн. 2023, в 22:01

3000 руб./за проект

08 июн. 2023, в 21:41

10000 руб./за проект