Question

我收到“.addEventListener不是函数”错误。我坚持这个：

static void Foo(List<Dictionary<string, string>> ProductItemsDictionary, string key)
{
    string value;
    foreach (var dictionary in ProductItemsDictionary)
        if (dictionary.TryGetValue(key, out value)) { /* Use value */ }
    // Not found
}

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

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

您需要通过“。addEventListener不是一个函数”错误注意的另一件重要事情是，该错误可能是由于为其分配了错误的对象（例如考虑）引起的

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 5

代码的第一行返回一个数组并将其分配给var注释，当你想要的是一个分配给var注释的元素时......

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

因此，当您需要在数组中的实际元素上使用方法addEventListener（）时，您尝试在数组上使用方法addEventListener（）。您需要通过访问数组中的元素来返回元素而不是数组，以便为var注释本身分配元素而不是数组。

改变......

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

到...

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

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

“.addEventListener不是函数”为什么会出现此错误？

6 个答案: