Ik krijg de foutmelding “.addEventListener is geen functie”. Ik zit hiermee vast:
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>
Antwoord 1, autoriteit 100%
Het probleem met uw code is dat uw script wordt uitgevoerd voordat het html-element beschikbaar is. Daarom is var commenteen lege array.
Dus je moet je script verplaatsen nadat het html-element beschikbaar is.
Ook getElementsByClassNameretourneert html-verzameling, dus als u gebeurtenislistener aan een element moet toevoegen, moet u zoiets doen als het volgende
comment[0].addEventListener('click' , showComment , false ) ;
Als je een gebeurtenislistener aan alle elementen wilt toevoegen, moet je ze doorlopen
for (var i = 0 ; i < comment.length; i++) {
comment[i].addEventListener('click' , showComment , false ) ;
}
Antwoord 2, autoriteit 39%
document.getElementsByClassNameretourneert een arrayvan elementen. dus misschien wil je een specifieke index ervan targeten: var comment = document.getElementsByClassName('button')[0];zou je moeten geven wat je wilt.
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 < numComments; i++) {
comments[i].addEventListener('click', showComment, false);
}
Update #2:(met ook removeEventListeneringebouwd)
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);
}
Antwoord 3, autoriteit 6%
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>Antwoord 4, autoriteit 4%
De eerste regel van uw code retourneert een array en wijst deze toe aan de var-opmerking, terwijl u een element wilt dat wordt toegewezen aan de var-opmerking…
var comment = document.getElementsByClassName("button");
Dus u probeert de methode addEventListener() op de array te gebruiken wanneer u de methode addEventListener() moet gebruiken op het daadwerkelijke element in de array. Je moet een element en geen array retourneren door het element binnen de array te openen, zodat de var-opmerking zelf een element krijgt en geen array.
Wijzigen…
var comment = document.getElementsByClassName("button");
naar…
var comment = document.getElementsByClassName("button")[0];
Antwoord 5, autoriteit 4%
Een ander belangrijk ding dat u moet opmerken met de “.addEventListener is geen functie”-foutis dat de fout kan optreden als gevolg van het toewijzen van een verkeerd object, bijvoorbeeld overwegen
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 de bovenstaande code ben ik in feite afbeeldingen toe aan een div-element in mijn HTML dynamisch met JavaScript. Ik heb dit gedaan door de afbeeldingen in een array te schrijven en ze door een tijdje te lussen en ze allemaal aan het div-element toe te voegen.
Ik heb vervolgens een klik-gebeurtenisluisteraar voor alle afbeeldingen toegevoegd.
De Code “Myimages [I] .ADDEVENTLISTLISTENER (‘klik’, fullimage);” geeft u een foutmelding van “AddEventListener is geen functie” omdat ik een add-meldlistener aan een array heb object dat niet de functie AddEventListener () heeft.
Voor de code “NEWIMAGE.ADDEVENTLISTENER (‘klik’, fullimage);” Het voert goed uit omdat het NewImage-object toegang heeft tot de functie AddEventListener () terwijl het array-object dat niet doet.
Voor meer verduidelijking volgt u de link: HTTPS: //Developer.mozilla.org/en-us/docs/web/javascript/reference/Errors/not_A_function
Antwoord 6
Probeer deze:
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);
Gebruik querySelectorin plaats van className