addEventListener is not a function why does this error occur

Question

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        lt input type  button  class  button  value  1  gt   lt input type  button  class  button  value  2  gt   lt div id  textfield  gt   lt  div gt

User · Answer

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

User · Answer

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

User · Answer

The problem with your code is that the your script is executed prior to the html element being available  Because of the that var comment is an empty array   So you should move your script after the html element is available    Also  getElementsByClassName returns html collection  so if you need to add event Listener to an element  you will need to do something like following  comment 0  addEventListener  click    showComment   false        If you want to add event listener to all the elements  then you will need to loop through them  for  var i   0   i  lt  comment length  i         comment i  addEventListener  click    showComment   false

User · Answer

document getElementsByClassName returns an array of elements  so may be you want to target a specific index of them  var comment   document getElementsByClassName  button   0   should get you what you want   Update  1   var comments   document getElementsByClassName  button    var numComments   comments length   function showComment       var place   document getElementById  textfield      var commentBox   document createElement  textarea      place appendChild commentBox      for  var i   0  i  lt  numComments  i        comments i  addEventListener  click   showComment  false       Update  2   with removeEventListener incorporated as well   var comments   document getElementsByClassName  button    var numComments   comments length   function showComment e      var place   document getElementById  textfield      var commentBox   document createElement  textarea      place appendChild commentBox     for  var i   0  i  lt  numComments  i          comments i  removeEventListener  click   showComment  false          for  var i   0  i  lt  numComments  i        comments i  addEventListener  click   showComment  false

User · Answer

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

User · Answer

x000D   x000D  var comment   document getElementsByClassName  button    x000D   x000D  function showComment     x000D    var place   document getElementById  textfield    x000D    var commentBox   document createElement  textarea    x000D    place appendChild commentBox   x000D    x000D   x000D  for  var i in comment    x000D    comment i  onclick   function     x000D      showComment    x000D       x000D    x000D   lt input type  button  class  button  value  1  gt  x000D   lt input type  button  class  button  value  2  gt  x000D   lt div id  textfield  gt  lt  div gt  x000D   x000D   x000D

[javascript] ".addEventListener is not a function" why does this error occur?

Examples related to javascript

Examples related to html