forEach 無法讀取新的節點元素 - js

Question

我用JS編寫了一個非常簡單的Todo 應用程序。 它工作正常，我有一些默認任務，我可以單擊它們將它們更改為完成或撤消，但問題是當我添加新任務時，我無法對其進行任何操作。

const input   = document.querySelector('#todoText');
const todo  = document.querySelector('#todo');
const todoLi  = document.querySelectorAll('#todo li');

// Add Todo
input.addEventListener('keyup', e => {
  if (e.keyCode === 13) {
    // Get input value
    let val = e.target.value;
    // Create <li>
    const li = document.createElement('li');
    // Create text node from input value
    let text = document.createTextNode(val);
    // Pass input value into <li>
    li.appendChild(text);
    // Add input value in Todo list
    todo.appendChild(li);
    // Reset input value after enter
    e.target.value = '';
  }
})


todoLi.forEach( item => {
  item.addEventListener('click', e => {

    if ( e.target.classList.contains('done') ) {
      e.target.classList.remove('done')
    } else {
      e.target.classList.add('done')
    }

  })
})

這是我在 Codepen 上的PEN

Answer 1

添加

li.addEventListener('click', e => {
  if ( e.target.classList.contains('done') ) {
    e.target.classList.remove('done')
  } else {
    e.target.classList.add('done')
  }
});

后

li.appendChild(text);

在將節點插入 DOM 之前在節點上添加單擊偵聽器。

分叉和固定片段：

 const input = document.querySelector('#todoText'); const todo = document.querySelector('#todo'); const todoLi = document.querySelectorAll('#todo li'); // Add Todo input.addEventListener('keyup', e => { if (e.keyCode === 13) { // Get input value let val = e.target.value; // Create <li> const li = document.createElement('li'); // Create text node from input value let text = document.createTextNode(val); // Pass input value into <li> li.appendChild(text); li.addEventListener('click', e => { if ( e.target.classList.contains('done') ) { e.target.classList.remove('done') } else { e.target.classList.add('done') } }); // Add input value in Todo list todo.appendChild(li); // Reset input value after enter e.target.value = ''; } }) todoLi.forEach( item => { item.addEventListener('click', e => { if ( e.target.classList.contains('done') ) { e.target.classList.remove('done') } else { e.target.classList.add('done') } }) })

 body { margin: 50px; } input { padding: 5px 15px; background: #eee; border: 0; width: 100%; margin-left: 10px; border: solid 2px #eee; border-radius: 50px; transition: all 350ms; font-size: 12px; &:focus { border: solid 2px #eee; background: #fff; outline: none; } } ul { li { position: relative; cursor: pointer; transition: all 350ms; &:hover { &:before { content: '👉'; position: absolute; left: -25px } } } } .done { text-decoration: line-through; color: #888; }

 <div class="d-flex align-items-center mb-5"> <span class="font-weight-bold text-muted">TODO:</span> <input id="todoText" placeholder="Write something and press Enter"> </div> <small>Todo list:</small> <ul id="todo"> <li>Add something new 👽</li> <li>This is a todo app with JS 🦄</li> <li class="done">I'm a done task 👁😍</li> </ul> <hr>

Answer 2

您可以通過將click事件偵聽器添加到#todo而不是li元素來解決您的問題並簡化您的代碼：

 const input = document.querySelector('#todoText'); const todo = document.querySelector('#todo'); // Add Todo input.addEventListener('keyup', e => { if (e.keyCode === 13) { // Get input value let val = e.target.value; // Create <li> const li = document.createElement('li'); // Create text node from input value let text = document.createTextNode(val); // Pass input value into <li> li.appendChild(text); // Add input value in Todo list todo.appendChild(li); // Reset input value after enter e.target.value = ''; } }) todo.addEventListener('click', e => { var li = e.target; while (li.nodeName.toLowerCase() !== 'li') { if (li === this) return; li = li.parentNode; } li.classList.toggle('done') })

 body { margin: 50px; } input { padding: 5px 15px; background: #eee; border: 0; width: 100%; margin-left: 10px; border: solid 2px #eee; border-radius: 50px; transition: all 350ms; font-size: 12px; &:focus { border: solid 2px #eee; background: #fff; outline: none; } } ul { li { position: relative; cursor: pointer; transition: all 350ms; &:hover { &:before { content: '👉'; position: absolute; left: -25px } } } } .done { text-decoration: line-through; color: #888; }

 <div class="d-flex align-items-center mb-5"> <span class="font-weight-bold text-muted">TODO:</span> <input id="todoText" placeholder="Write something and press Enter"> </div> <small>Todo list:</small> <ul id="todo"> <li>Add something new 👽</li> <li>This is a todo app with JS 🦄</li> <li class="done">I'm a done task 👁😍</li> </ul> <hr>