Question

我只是试图打开和关闭一个类，只需点击一个todo列表应用程序，我只使用vanilla JS创建（没有jQuery）。我错过了什么或做错了什么？这是我现在的代码

HTML

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

JS

system

当我点击列表中的某个项目时，它会在控制台中显示此错误 - ＆＃34;未捕获的TypeError：无法读取属性＆＃39; classList＆＃39;未定义＆＃34;

我做错了什么？

Answer 1

您的代码中存在两个问题。

而不是getElementByTagName，应该是getElementsByTagName：
```
li = document.getElementsByTagName("li")
```
在li元素上定义的事件处理程序中，您可以使用li而不是this来引用li[i]元素。

基本上问题是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，您可以使用i关键字let在本地范围内创建索引变量let i = 0。但请注意，它不适用于旧浏览器。

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>

Answer 2

scope/value of i是问题所在。单击元素时，由于i，i++的值增加到3（在本例中）。您可以使用let代替var

＆＃13;

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

＆＃13;

.done{
color:red;
}

＆＃13;

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

＆＃13;

未捕获的TypeError：无法读取属性＆＃39; classList＆＃39;未定义 - 尝试在JS中切换类

2 个答案: