".addEventListener n'est pas une fonction" Pourquoi cette erreur se produit-elle?

J'obtiens un ".la méthode addEventListener n'est pas une fonction d'erreur". Je suis coincé sur ce:

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>

source d'informationauteur leecarter

html javascript

29

Le problème avec ton code, c'est que votre script est exécuté avant l'élément html. Parce que de la que var comment est un tableau vide.

Donc, vous devez déplacer votre script après l'élément html est disponible.

Aussi, getElementsByClassName retourne html collection, donc si vous avez besoin d'ajouter un Écouteur d'événement à un élément, vous aurez besoin de faire quelque chose comme suit
```
comment[0].addEventListener('click' , showComment , false ) ; 
```
Si vous voulez ajouter un écouteur d'événement pour tous les éléments, alors vous aurez besoin pour parcourir en boucle
```
for (var i = 0 ; i < comment.length; i++) {
   comment[i].addEventListener('click' , showComment , false ) ; 
}
```

document.getElementsByClassName retourne un tableau des éléments. donc peut-être que vous souhaitez cibler un index spécifique: var comment = document.getElementsByClassName('button')[0]; devrait vous obtenir ce que vous voulez.

Mise à jour #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 += 1) {
  comments[i].addEventListener('click', showComment, false);
}

Mise à jour #2: (avec removeEventListener incorporés en tant que bien)

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

1

La première ligne de votre code renvoie un tableau et l'affecte à la var commentaire, quand ce que vous voulez, c'est un élément affecté à la var commentaire...
```
var comment = document.getElementsByClassName("button");
```
Si vous essayez d'utiliser la méthode addEventListener() sur le tableau lorsque vous devez utiliser la méthode addEventListener() sur l'élément dans le tableau. Vous avez besoin de retourner un élément d'un tableau pas en accédant à l'élément à l'intérieur de la matrice de sorte que la var commentaire lui-même est affecté à un élément d'un tableau pas.

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

** * *

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

Utilisation querySelector au lieu de d'autres
Espérons que cela va aider à les trouver plein

Vous devez vous connecter pour publier un commentaire.