javascript 节点列表选择器答案

【问题标题】：javascript NodeList Selectorjavascript 节点列表选择器
【发布时间】：2021-12-21 02:46:58
【问题描述】：

我想提前感谢您提供的所有帮助，所以这是我的问题。

我正在尝试制作一个简单的待办事项应用程序我正处于我希望能够从列表数组中删除一些项目的步骤（每个新列表项都被推入一个数组中）所以我添加了一个按钮到每个任务以删除任务然后我执行 querySelectorAll 以获取所有按钮然后循环每个按钮并添加事件侦听器以运行特定功能但它不起作用我尝试了 forEach 循环数组。 from 方法将我的脚本标签移动到文件的底部，并将我的 querySelectorAll 移动到更下方以确保它捕获所有按钮但如果你们有任何指针我会很感激这是我的代码

github 要点enter link description here

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>TODO App</title>
  </head>
  <body>
    <div class="container">
      <header class="header"><h1 class="header-title">To-Do List</h1></header>
      <nav class="navbar"></nav>
      <main class="main">
        <label for="task">Add a task: </label>
        <input class="taskTextInput" type="text" placeholder="add a task" />
        <button class="addTaskBtn" type="button">Add</button>
        <button class="clearTaskBtn" type="button">Clear</button>
        <hr />
        <div class="taskContainer"></div>
      </main>
      <footer class="footer"></footer>
      <script src="./script.js" defer></script>
    </div>
  </body>
</html>

"use strict";
const taskList = [];
const addTaskBtn = document.querySelector(".addTaskBtn");
const taskTextInput = document.querySelector(".taskTextInput");
const taskContainer = document.querySelector(".taskContainer");
let deleteTaskBtn = document.querySelectorAll(".deleteTaskBtn");

function addTask(e) {
  e.preventDefault();
  if (taskTextInput.value == "") return;
  taskContainer.innerHTML = "";
  taskList.push(taskTextInput.value);
  taskTextInput.value = "";
  displayTask();
  return (deleteTaskBtn = document.querySelectorAll(".deleteTaskBtn"));
}
addTaskBtn.addEventListener("click", addTask);

function displayTask() {
  for (const task in taskList) {
    const listItem = `
    <div class="task-container">
        <li class="task-item">${taskList[task]}</li>
        <div class="task-button">
            <input class="toggleTaskBtn" type="checkbox"/>
            <img src="./image/delete.png" class="deleteTaskBtn icon"></img>
        </div>
    </div>`;
    taskContainer.insertAdjacentHTML("afterbegin", listItem);
  }
}
function deleteTask() {
  console.log("hello");
}
//
deleteTaskBtn.forEach((btn) => {
  btn.addEventListener("click", deleteTask);
});
//
const toggleTaskBtn = document.querySelectorAll(".toggleTaskBtn");
function toggleTask() {}

/*
1. Add a new item to a array
2. display the array on the page
3. add a checkbox when click add a line over the text and move it to the button if unclick remove the line and move it back in the top
4. add a clear button to clear of completed item
*/

【问题讨论】：

标签： javascript nodelist selectors-api

【解决方案1】：

在这部分代码中，您将事件处理程序分配给尚不存在的按钮：

deleteTaskBtn.forEach((btn) => {
  btn.addEventListener("click", deleteTask);
});

您每次只在displayTask 函数内创建这些按钮。但是，您可以拦截父元素中的所有子 click 事件并在那里执行所有检查。这个例子或许能帮到你：

taskContainer.addEventListener('click', (e) => {
  if (e.target.matches('.deleteTaskBtn')) {
    console.log('Clicked delete Task Button !!!');
  }
})

【讨论】：

感谢您的帮助！这是我没有想到的。完全有道理该按钮尚不存在，因此无法添加该事件再次感谢！