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

Question

我有一个最初包含 3 个项目的列表，以及一个输入表单，我可以从中提交新项目到 list.I 有一个 for 循环来切换列表项目的 class单击项目时，它在最初位于列表中的 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));
}

应该为添加的每个列表项切换 "done" class

Answer 1

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

li = document.getElementsByTagName("li");

Answer 2

添加新元素时，没有理由查询 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>

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

For loop doesn't recognize my list items that I add using a submit button to the list, how to fix it?

javascript

arrays

for-loop

event-listener

dom-events