我想提前感謝您提供的所有幫助，所以這是我的問題。
我正在嘗試制作一個簡單的待辦事項應用程式，我希望能夠從串列陣列中洗掉一些專案（每個新的串列專案都被推入一個陣列中），所以我向每個專案添加了一個按鈕task 洗掉任務然后我執行 querySelectorAll 以獲取所有按鈕然后我遍歷每個按鈕并添加一個事件偵聽器以運行特定功能但它不起作用我嘗試了 forEach 回圈陣列。from 方法將我的腳本標簽移動到檔案的底部，并將我的 querySelectorAll 移動到更遠的下方以確保它捕獲所有按鈕，但如果你們有任何指標，我將不勝感激這是我的代碼
github gist在此處輸入鏈接描述
<!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 >
<li >${taskList[task]}</li>
<div >
<input type="checkbox"/>
<img src="./image/delete.png" ></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
*/
uj5u.com熱心網友回復：
在這部分代碼中，您將事件處理程式分配給尚不存在的按鈕：
deleteTaskBtn.forEach((btn) => {
btn.addEventListener("click", deleteTask);
});
您每次只在displayTask函式內部創建這些按鈕。但是，您可以攔截click父元素中的所有子事件并在那里執行所有檢查。這個例子或許可以幫助你：
taskContainer.addEventListener('click', (e) => {
if (e.target.matches('.deleteTaskBtn')) {
console.log('Clicked delete Task Button !!!');
}
})
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/388127.html
標籤：javascript 节点列表 选择器 API 去做