I am currently facing an issue where I am attempting to implement an edit function to replace text and dates. While I have managed to successfully update the text using the DOM, the edited values revert back to their original form upon page refresh. I suspect this is happening because the object's values in the array are not being correctly retained after editing.
To tackle this problem, I believe utilizing a map function could help create a new array and display the updated array on the DOM.
Please take a look at the code snippet below:
let Editedmodal = document.querySelector("#edit-modal");
let editBtn = document.querySelector(".edit");
// Edit Task Function
function editTask(id) {
let taskIndex = taskArray.findIndex((task) => task.id === id);
let taskElement = document.querySelector(`.task-to-do[data-id="${id}"]`);
// Accessing Edit Modal Element
let Editedmodal = document.querySelector("#edit-modal");
// Displaying Existing Task Details in Edit Form
EditedInputTask.value = taskArray[taskIndex].task;
EditedInputDate.value = taskArray[taskIndex].date;
Editedmodal.style.display = "grid";
// Submitting Edited Task
EditedsubmitForm.addEventListener("click", (e) => {
e.preventDefault();
if (!EditedInputTask.value) {
// Form Validation for Task Input
EditedInputNoTask.style.display = "block";
EditedInputTask.style.marginTop = "-1em";
timeout = setTimeout(() => {
EditedInputNoTask.style.display = "none";
EditedInputTask.style.marginTop = "0";
}, 3000);
}
if (!EditedInputDate.value) {
// Form Validation for Date Input
EditedInputNoDate.style.display = "block";
EditedInputDate.style.marginTop = "-1em";
// Timeout for Error Message
timeout = setTimeout(() => {
EditedInputNoDate.style.display = "none";
EditedInputDate.style.marginTop = "0";
}, 3000);
} else {
Editedmodal.style.display = "none";
EditedInputTask.value = "";
EditedInputDate.value = "";
taskArray[taskIndex].task = taskObjEdited;
taskArray[taskObjEdited.task] = DateStore;
}
taskArray[taskIndex].task = EditedInputTask.value;
taskArray[taskIndex].date = EditedInputDate.value;
taskElement.querySelector("#list-item-date").textContent = `Due: ${taskArray[taskIndex].date}`;
taskElement.querySelector("#list-item-task").textContent = taskArray[taskIndex].task;
});
}
// Storing Task Array Locally
function storeTaskArrayLocally() {
localStorage.setItem("taskLocalstorage", JSON.stringify(taskArray));
}
// Initializing Task Array from Local Storage
function initializeTaskAraryFromLocalStoraege() {
const storedTask = localStorage.getItem("taskLocalstorage");
if (storedTask) {
taskArray = JSON.parse(storedTask);
renderTask();
}
}