我创建了一个函数，当用户单击"完成"按钮时，该函数将完成一项任务，但是，我使用for循环遍历数组，以便它可以将其标记出来.
目前，无论我按什么完整的按钮，它都只标记第一个任务，而不是我想要的任务.
HTML
<!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="../css/main.css">
<script src="js/main.js" defer></script>
<title>To Do Application</title>
</head>
<body>
<div class="form">
<input class ="user-input" type="text">
<input class="date" type="date">
<input class="time" type="time">
<button onclick="addTask()" class="add" id="add">+</button>
</div>
<div class="list"></div>
<!--
<div class="task-content">
<div class="task" data-id="${id}">
<div class="new-task-created">${taskNew}</div>
<label class="due-date">${taskDate}</label>
<label class="due-time">${taskTime}</label>
</div>
<div class="atcion-buttons">
<button onclick="editItem()" class="edit" data-id="${id}">Edit</button>
<button onclick="deleteItem()" class="delete" data-id="${id}">Delete</button>
<button onclick="completeItem()" class="complete" data-id="${id}">Complete</button>
</div>
</div>
-->
</html>
JS公司
// variables object
const el = {
form: document.querySelector(".form"),
input: document.querySelector(".user-input"),
list: document.querySelector(".list"),
date: document.querySelector(".date"),
time: document.querySelector(".time"),
};
//local storage key
const STORAGE_KEY = "tasks-storage-key";
//Create ID
const createId = () =>
`${Math.floor(Math.random() * 10000)}${new Date().getTime()}`;
//variable of empty array that gets new task
let taskList = JS公司ON.parse(localStorage.getItem(STORAGE_KEY) ?? "[]");
function makeNewTask() {
const data = {
id: createId(),
taskNew: el.input.value,
taskDate: el.date.value,
taskTime: el.time.value,
};
return data
}
//function that creates new tasks with date and time
function display() {
const tasks = document.createElement("div");
data = makeNewTask();
tasks.innerHTML = `
<div class="task-content">
<div class="task" data-id="${data.id}">
<div class="new-task-created">${data.taskNew}</div>
<label class="due-date">${data.taskDate}</label>
<label class="due-time">${data.taskTime}</label>
</div>
<div class="action-buttons">
<button onclick="editItem()" class="edit" data-id="${data.id}">Edit</button>
<button onclick="deleteItem()" class="delete" data-id="${data.id}">Delete</button>
<button onclick="completeItem()" class="complete" data-id="${data.id}">Complete</button>
</div>
</div>`;
taskList.push(tasks);
el.list.appendChild(tasks);
}
//event listner that listens for add button.
function addTask() {
display();
}
//function that stores task list.
function storeList() {
localStorage.setItem(STORAGE_KEY, JS公司ON.stringify(taskList));
}
//function that removes task from array with delete button.
function deleteItem() {
let removeitem = document.querySelector(".task-content");
removeitem.parentNode.removeChild(removeitem);
localStorage.removeItem(STORAGE_KEY);
}
//function that removes stored task when deleted.
//function that that edits tasks with date and time.
function editItem(){
}
//function that that completes task.
function completeItem() {
let taskItem = this.querySelector(".new-task-created");
let dateItem = this.querySelector(".due-date");
let timeItem = this.querySelector(".due-time");
// style..
taskItem.style.textDecoration = "line-through";
dateItem.style.textDecoration = "line-through";
timeItem.style.textDecoration = "line-through";
}
最终的结果是，"完成"按钮应该通过其索引标记任务，而不仅仅是顶部的索引.