Цикл for не распознает мои элементы списка, которые я добавил с помощью кнопки отправки в список, как это исправить?

Question

У меня есть список с изначально 3 элементами и форма ввода, из которой я могу отправлять новые элементы в список. У меня есть цикл for для переключения класса для элементов списка при нажатии на элемент, он отлично работает на3 элемента, которые изначально находятся в списке, но когда я его примеряю и новый идентификатор добавленного элемента не распознает его вообще, даже если длина моего списка становится больше."класс для каждого добавляемого списка

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

Answer 2

После добавления элементов необходимо обновить переменную JS, содержащую список:

li = document.getElementsByTagName("li");