javascript 节点列表选择器

Question

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

我正在尝试制作一个简单的待办事项应用程序我正处于我希望能够从列表数组中删除一些项目的步骤（每个新列表项目都被推入一个数组）所以我向每个任务添加一个按钮以删除任务然后我执行 querySelectorAll 以获取所有按钮然后我遍历每个按钮并将事件侦听器添加到运行特定功能但它不起作用我尝试了 forEach循环数组。从方法将我的脚本标记移动到文件底部，并将我的 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
*/

Answer 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 !!!');
  }
})

javascript 节点列表选择器

javascript NodeList Selector

javascript

nodelist

selectors-api