Eventlistener 在點擊幾下后停止工作，控制台中沒有錯誤

Question

我正在為我的投資組合制作簡單的待辦事項清單。 它允許用戶創建新任務、刪除它們或使用交叉效果將它們標記為已完成

它似乎正在工作，但是當您添加一些新任務時，負責完成任務的事件監聽器會發生一些事情。 從這一刻起，有些任務可以被划掉，有些則不能。 我試圖修復它，但老實說，我不知道為什么會發生這種情況。 任何幫助表示贊賞

document.getElementById('addTask').addEventListener('click', newTask)

function newTask() {

    const taskText = document.getElementById('taskInput').value;
    let parentTask = document.querySelector(".singleTask");
    let childTask = parentTask.cloneNode(true);
    document.getElementById('taskList').appendChild(childTask);
    childTask.querySelector("p").innerHTML = taskText;
    childTask.classList.remove('crossedOut');
    childTask.classList.remove('invisible');
    childTask.style.opacity = '1';
    reload();
}


const removeIcons = document.querySelectorAll('[bin]');
removeIcons.forEach(e => e.addEventListener("click", () => removeTask(e)));

function removeTask(e) {
    e.parentNode.parentNode.style.opacity = '0';
    setTimeout(() => {
        e.parentNode.parentNode.classList.add('invisible')
    }, 350)

}


const tasks = document.querySelectorAll('div.singleTask');
tasks.forEach(e => e.addEventListener("click", () => crossOut(e)));

function crossOut(e) {
    e.classList.toggle('crossedOut')


}

function reload() {
    const removeIcons = document.querySelectorAll('[bin]');
    removeIcons.forEach(e => e.addEventListener("click", () => removeTask(e)));
    const tasks = document.querySelectorAll('div.singleTask');
    tasks.forEach(e => e.addEventListener("click", () => crossOut(e)));
}

<div class="plannerBox  shadow-lg">
   <p class="plannerTitle">Daily Planner</p>
   <div class="newTaskContainer">
      <input type="text" id="taskInput" class="form-control" value="What to do next?">
      <div class="addTask" id="addTask">
         <p>
         <div class="a_demo_three">
            Add task
         </div>
         </p>
      </div>
   </div>
   <div class="taskContainer" id="taskList">
      <div class="singleTask">
         <p>Read a book</p>
         <div class="removeTask">
            <i class="far fa-trash-alt" bin></i>
         </div>
      </div>
      <div class="singleTask">
         <p>Metting with team</p>
         <div class="removeTask">
            <i class="far fa-trash-alt" bin></i>
         </div>
      </div>
      <div class="singleTask">
         <p>Kill yourself</p>
         <div class="removeTask">
            <i class="far fa-trash-alt" bin></i>
         </div>
      </div>
   </div>
</div>

如果您想現場觀看： http://www.blackravenstudio.net/javascript/ 'Plan you day' 請記住，此作品集仍在進行中：）

Answer 1

在您的重新加載 function 中，一旦添加了新的事件偵聽器，您就會為每個任務添加一個新的事件偵聽器。

function reload() {
  const removeIcons = document.querySelectorAll('[bin]');
  removeIcons.forEach(e => e.addEventListener("click", () => removeTask(e)));
  const tasks = document.querySelectorAll('div.singleTask');
  tasks.forEach(e => e.addEventListener("click", () => crossOut(e)));
}

因此，當您添加 3 個任務時，這是每個任務將擁有的偵聽器數量（假設頁面加載時存在 3 個）：

4, 4, 4, 3, 2, 1

此問題與您的crossOut function 結合使用

function crossOut(e) {
    e.classList.toggle('crossedOut') 
}

意味着只有具有奇數個偵聽器的任務才能被划掉。 （因為切換 class 偶數次將使其保持不變）要解決此問題，您需要更改重新加載 function。

// changed name from reload to addTaskEventListners
function addTaskEventListners(task) {
  task.addEventListener("click", () => crossOut(task)):
  const removeIcon = task.querySelector('[bin]');
  removeIcon.addEventListener("click", () => removeTask(task));
}

並在你的newTask function 中調用它，就像addTaskEventListners(childTask)一樣。 然后，您還需要像這樣稍微更改您的removeTask function：

function removeTask(e) {
    // e is now the task element itself and not the remove button.
    e.style.opacity = '0';
    setTimeout(() => {
        e.parentNode.parentNode.classList.add('invisible')
    }, 350)
}

Answer 2

如果添加“1”，它會起作用。 如果添加“1”和“2”，則“2”有效。 如果添加“1”、“2”和“3”，則“1”和“3”有效。

所以基本上只有在最后一個條目之前添加的那個不起作用。

我不確定它是否會有所幫助，但請嘗試使用：

// put crossOut function between { .. }
tasks.forEach(e => e.addEventListener("click", () => {crossOut(e)}));