“.addEventListener 不是函數”為什么會出現這個錯誤？

Question

我收到“.addEventListener 不是函數”錯誤。 我被困在這個：

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>

Answer 1

您的代碼的問題在於您的腳本是在 html 元素可用之前執行的。 因為那個var comment是一個空數組。

所以你應該在 html 元素可用后移動你的腳本。

此外， getElementsByClassName返回 html 集合，因此如果您需要向元素添加事件偵聽器，則需要執行以下操作

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

如果要將事件偵聽器添加到所有元素，則需要遍歷它們

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

Answer 2

document.getElementsByClassName返回一個元素數組。 所以你可能想要針對它們的特定索引： var comment = document.getElementsByClassName('button')[0]; 應該得到你想要的。

更新 #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 < numComments; i++) {
  comments[i].addEventListener('click', showComment, false);
}

更新 #2 :（也包含removeEventListener ）

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 < numComments; i++) {
    comments[i].removeEventListener('click', showComment, false);
  }
}

for (var i = 0; i < numComments; i++) {
  comments[i].addEventListener('click', showComment, false);
}

Answer 3

 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>

Answer 4

代碼的第一行返回一個數組並將其分配給 var 注釋，當您想要的是分配給 var 注釋的元素時...

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

因此，當您需要在數組中的實際元素上使用 addEventListener() 方法時，您正在嘗試在數組上使用 addEventListener() 方法。 您需要通過訪問數組中的元素來返回一個元素而不是數組，以便為​​ var 注釋本身分配一個元素而不是數組。

改變...

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

到...

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

Answer 5

您需要注意“.addEventListener is not a function”錯誤的另一件重要事情是錯誤可能是由於為其分配了錯誤的對象而導致的，例如考慮

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++;
}

在上面的代碼中，我基本上是使用 javascript 動態地將圖像分配給我的 html 中的 div 元素。 我通過將圖像寫入數組並通過 while 循環循環它們並將它們全部添加到 div 元素來完成此操作。

然后我為所有圖像添加了一個點擊事件偵聽器。

代碼“myImages[i].addEventListener('click',fullImage);” 會給你一個“addEventListener 不是函數”的錯誤，因為我將 addEventListener 鏈接到一個沒有 addEventListener() 函數的數組對象。

但是對於代碼“newImage.addEventListener('click',fullImage);” 它可以正確執行，因為 newImage 對象可以訪問函數 addEventListener() 而數組對象沒有。

如需更多說明，請點擊鏈接： https : //developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Not_a_function

Answer 6

試試這個：

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

使用querySelector而不是className