2017-09-26 1 views
-1

Je suis en train de faire toute l'orange de li quand on clique dessus, mais je reçois l'erreur suivante:erreur addEventListener (« ne peut pas définir la propriété undefined »)

Ceci est mon code

var listItems=document.querySelectorAll("li"); 
    for(var i=0; i<listItems.length;i++){ 
    listItems[i].addEventListener("click",()=>{ 

    this.style.color="orange"; 
}); 

    } 

erreur

Uncaught TypeError: Cannot set property 'color' of undefined at HTMLLIElement.listItems.(anonymous function).addEventListener 
+0

Utilisez une fonction et non pas une fonction de flèche? – Li357

+0

Vous pouvez toujours utiliser une fonction de flèche, mais vous aurez besoin de l'objet événement: 'listItems [i] .addEventListener (" click ", event => event.currentTarget.style.color =" orange ");' – llama

Répondre

2

Vous utilisez une fonction de flèche w Ici, ce n'est pas nécessaire, et c'est en fait la cause de votre problème. this ne fait pas référence à l'élément.

Arrow functions (MDN):

An arrow function expression [...] does not bind its own this


Il suffit d'utiliser une fonction anonyme standard:

var listItems = document.querySelectorAll("li"); 
for (var i = 0; i < listItems.length; i++) { 
    listItems[i].addEventListener("click", function() { 

     this.style.color = "orange"; 
    }); 

} 
0

Cela fonctionne pour vous

passe événement tout événement attching à li,

document.getElementById("demo").innerHTML = "Hello Dolly."; 
 
window.onload= function(){ 
 
debugger; 
 
var listItems=document.querySelectorAll("li"); 
 
    for(var i=0; i<listItems.length;i++){ 
 
    listItems[i].addEventListener("click",(event,i)=>{ 
 
event.target.style.color="orange"; 
 
}); 
 
} 
 
}
<!DOCTYPE html> 
 
<html> 
 
<body> 
 

 
<h2>JavaScript Statements</h2> 
 

 
<p>In HTML, JavaScript statements are executed by the browser.</p> 
 
<ul> 
 
<li>A</li> 
 
<li>B</li> 
 
<li>C</li> 
 
</ul> 
 
<p id="demo"></p> 
 

 
</body> 
 
</html>