For循环无法识别我使用提交按钮添加到列表中的列表项，如何解决？答案

【问题标题】：For loop doesn't recognize my list items that I add using a submit button to the list, how to fix it?For循环无法识别我使用提交按钮添加到列表中的列表项，如何解决？
【发布时间】：2019-04-26 23:45:47
【问题描述】：

我有一个最初包含 3 个项目的列表，以及一个输入表单，我可以在其中向列表提交新项目。我有一个 for 循环来在单击项目时切换列表项目的类，它可以正常工作最初在列表中的 3 个项目，但是当我尝试它时，即使我的列表长度变大，新添加的项目 ID 也根本无法识别它。

var li = document.getElementsByTagName("li");


function addDoneClass(i) {
    return function() {
        li[i].classList.toggle("done");
    };
}


for(var i = 0; i< li.length; i++) {
    li[i].addEventListener("click", addDoneClass(i));
}

应该为每个添加的列表项切换“完成”类

【问题讨论】：

标签： javascript arrays for-loop event-listener dom-events

【解决方案1】：

当您添加一个新元素时，没有理由再次查询 DOM 并遍历所有元素。只需在用于创建新列表元素的任何代码中添加点击处理程序。如果您有一个 li 元素列表，但您出于其他原因保留，您也可以在此处将其添加到列表中。

var li = document.getElementsByTagName("li");
var ul = document.getElementById('theList')

function addDoneClass() {
    this.classList.toggle("done")
}

function addLI(){
  let l = document.createElement('li')              // make a new li element
  l.textContent = "New LI"
  ul.appendChild(l)
  l.addEventListener("click", addDoneClass)       // add your handler
}

for(var i = 0; i< li.length; i++) {                  // deal with initial li elements
    li[i].addEventListener("click", addDoneClass);
}

.done{
  color:red
}

<ul id="theList">
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>

<button onclick="addLI()"> add </button>

【讨论】：

【解决方案2】：

添加项目后，需要更新包含列表的JS变量：

li = document.getElementsByTagName("li");

【讨论】：