I'm building a ToDo app. The feature I'm having issue with is when I go to "Edit" a task and upon clicking "Enter", it adds a New Task, rather than updating the existing task.
Simultaneously, I want to update the Date of the task in "Edit". I have an EventListener tied to 'Set Date' button, inside of my datepicker. Each time the 'Set Date' is clicked, it also adds a New Task, rather than updating the date.
// edit task function
function editTask(taskId, taskName) {
editId = taskId;
isEditedTask = true;
taskInput.value = taskName;
element.classList.add("show__date")
}
// enter feature
taskInput.addEventListener("keyup", e => {
let userTask = taskInput.value.trim();
if(e.key == "Enter" && userTask ) {
// alert(When Is This Task Due? 😁")
element.classList.add("show__date");
} document.addEventListener("click", () => {
// removing show class from the task menu on the document click
if(e.target !== insertDate) {
element.classList.remove("show__date");
}
});
})
// set date feature
insertDate.addEventListener("click", () => {
if (dateSelect.value.length !== "") { // checking to see if .date__wrapper input
field is empty
element.classList.remove("show__date"); // removing datepicker, if field is
not empty after clicking button
let userTask = taskInput.value.trim();
let dueDate = dateSelect.value.trim();
let taskInfo = {name: userTask, status: "pending", date: dueDate};
todos.push(taskInfo); // adding new task to todos
}
// else if (!isEditedTask) {
// if(!todos) { //if todos doesn't exist, pass an empty array to todos
// todos = [];
// }
// }
localStorage.setItem("todo__list", JSON.stringify(todos));
showTodo(); //displays new task inside the task menu once enter is keyed
showTodo("all")
})
So I click "Edit" on "Task 2" and it fills the input field and I change the new task name to Task 12 and press "Enter". After clicking "Enter", the datepicker shows and I choose a date. After clicking "Set Date", instead of updating the existing task, it adds a new task entirely. So Task 1, Task 2, Task 3, and Task 12. Instead of Task 1, Task 12, Task 3.
In the insertDate.addEventListener("click"...
You always take the inputs and then add a new todo. You should first check if you are currently editing and if you are, take the todo you are editing and change it instead of pushing a new one in the list.
it would look something like this:
// set date feature
insertDate.addEventListener("click", () => {
if (dateSelect.value.length !== "") { // checking to see if .date__wrapper input
field is empty
element.classList.remove("show__date"); // removing datepicker, if field is not empty after clicking button
let userTask = taskInput.value.trim();
let dueDate = dateSelect.value.trim();
if (editId) {
const todo = todos.find(todo => todo.id === editId);
todo.name = userTask;
todo.date = dueDate
} else {
let taskInfo = {name: userTask, status: "pending", date: dueDate};
todos.push(taskInfo); // adding new task to todos
}
}
// else if (!isEditedTask) {
// if(!todos) { //if todos doesn't exist, pass an empty array to todos
// todos = [];
// }
// }
localStorage.setItem("todo__list", JSON.stringify(todos));
showTodo(); //displays new task inside the task menu once enter is keyed
showTodo("all")
})
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.