未捕获TypeError:无法读取未定义的属性“”classList“”-正在尝试切换JS中的类
未捕获TypeError:无法读取未定义的属性“”classList“”-正在尝试切换JS中的类
提问于 2018-02-26 13:56:44
我只是简单地尝试通过单击一个任务列表应用程序来打开和关闭一个类，我只是使用vanilla JS创建的(没有jQuery)。我遗漏了什么或做错了什么？下面是我现在拥有的代码
HTML
<div id="container">
<h1> Todo List </h1>
<input type="text" placeholder="New todo">
<ul>
<li> item 1</li>
<li> item 2 </li>
<li> item 3 </li>
</ul>
</div>JS
var h1 = document.querySelector("h1")
var li = document.getElementByTagName("li")
for ( var i = 0 ; i < li.length ; i++){
li[i].addEventListener("click", function(){
li[i].classList.toggle("done");
})
}当我单击列表中的一项时，它在控制台中显示此错误-“未捕获TypeError:无法读取未定义的属性'classList‘”
我做错了什么？
回答 2
Stack Overflow用户
发布于 2018-02-26 14:00:20
您的代码中有两个问题。
- 而不是
getElementByTagName，应该是getElementsByTagName：
li = document.getElementsByTagName("li")
- Inside定义在
li元素上的事件处理程序，您可以使用this而不是li[i]来引用li元素。
基本上，问题是i是由for循环递增的，当单击处理程序实际执行时，i的值为3。因此，引用li[i]是错误的，因为只有三个li元素(因此直到li[2]).
以下是更新后的代码片段：
var h1 = document.querySelector("h1")
var li = document.getElementsByTagName("li")
for (var i = 0; i < li.length; i++) {
li[i].addEventListener("click", function() {
this.classList.toggle("done");
})
}.done {
color: red;
}<div id="container">
<h1> Todo List </h1>
<input type="text" placeholder="New todo">
<ul>
<li> item 1</li>
<li> item 2 </li>
<li> item 3 </li>
</ul>
</div>
响应注释中的ikrabbe，您可以使用let关键字let i = 0在本地范围内创建索引变量i。但请注意，它不能与较旧的浏览器一起工作。
var h1 = document.querySelector("h1")
var li = document.getElementsByTagName("li")
for (let i = 0; i < li.length; i++) {
li[i].addEventListener("click", function() {
li[i].classList.toggle("done");
})
}.done {
color: red;
}<div id="container">
<h1> Todo List </h1>
<input type="text" placeholder="New todo">
<ul>
<li> item 1</li>
<li> item 2 </li>
<li> item 3 </li>
</ul>
</div>
Stack Overflow用户
发布于 2018-02-26 14:01:54
scope/value of i是问题所在。当单击该元素时，由于i++，i的值将递增到3(在本例中)。您可以使用let而不是var
var h1 = document.querySelector("h1")
var li = document.getElementsByTagName("li")
for (let i = 0; i < li.length; i++) {
li[i].addEventListener("click", function() {
// console.log(i) // will log i =3 if let is replaced by var
li[i].classList.toggle("done");
})
}.done{
color:red;
}<div id="container">
<h1> Todo List </h1>
<input type="text" placeholder="New todo">
<ul>
<li> item 1</li>
<li> item 2 </li>
<li> item 3 </li>
</ul>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48982274
复制相关文章
相似问题
腾讯云开发者
