的addEventListener错误（“不能设置的未定义的属性”）

-1

我试图让所有的li的橙色被点击时他们，但我发现了以下错误：的addEventListener错误（“不能设置的未定义的属性”）

这是我的代码

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

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

    }

错误

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

来源

2017-09-26 tjsims8819

使用常规的功能，而不是一个箭头的功能？ – Li357

您仍然可以使用箭头函数，但需要事件对象：'listItems [i] .addEventListener（“click”，event => event.currentTarget.style.color =“orange”）;' – llama

您使用的箭头函数w这里没有必要，它实际上是你问题的原因。 this不是指元素。

Arrow functions (MDN)：

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

只需使用一个标准的匿名函数：

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

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

}

来源

2017-09-26 18:14:56 Santi

这会为你

通事件工作，同时attching事件里，

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>

来源

2017-09-26 18:27:09

的addEventListener错误（“不能设置的未定义的属性”）

回答

相关问题