I’m working on a project with multiple JavaScript files, and I’m stuck on an issue with updating task lists. When I try to edit a task, a new task list is created instead of updating the existing one.
the first task is the original, and the second one is created after attempting an update.
I added console logs and noticed that my form values appear correctly during task creation, but when editing the task and clicking ‘Add’, the values clear out before reaching the addTask function, treating it as a new task creation.
I suspect the issue may be due to form.reset() or how the ‘Add’ button is handling the edit as a new task rather than an update, but I’m not sure how to approach debugging this issue.
Expectations: I have a form where I can add tasks, and when I enter edit mode, I expect to update the existing task.
const allTask = () => {
const newTaskBtn = document.querySelector('.newTask');
const cancel = document.querySelector('.cancel');
const dialog = document.querySelector('dialog');
const form = document.querySelector('form');
let isEditing = false;
let editIndex = null;
class TaskList {
constructor(name, date, priority, note, completed = false) {
this.name = name;
this.date = date;
this.priority = priority;
this.note = note;
this.completed = completed;
}
};
function filterAndRenderMyTasks() {
const myTasks = taskStore.tasks.filter(task => !task.completed && (!task.date || isTodayOrUpcoming(task.date)));
renderTaskList(myTasks);
}
function isTodayOrUpcoming(date) {
const today = new Date();
const taskDate = new Date(date);
return taskDate >= today;
}
filterAndRenderMyTasks();
function addTask(name, date, priority, note) {
console.log('Inside addTask:', {
name,
date,
priority,
note
});
if (!name || name.trim() === '') {
console.error('Task name is required');
return;
}
console.log('isEditing:', isEditing, 'editIndex:', editIndex);
if (isEditing) {
if (editIndex !== null && editIndex >= 0 && editIndex < taskStore.tasks.length) {
taskStore.tasks[editIndex].name = name;
taskStore.tasks[editIndex].date = date;
taskStore.tasks[editIndex].priority = priority;
taskStore.tasks[editIndex].note = note;
console.log("Task updated at index:", editIndex, taskStore.tasks[editIndex]);
} else {
console.error("Invalid editIndex, task not updated");
}
} else {
const newTask = new TaskList(name, date, priority, note);
taskStore.tasks.push(newTask);
console.log("Task added:", taskStore.tasks);
}
filterAndRenderMyTasks();
console.log('Task list after rendering:', taskStore.tasks);
};
function setupEventListeners() {
if (newTaskBtn) {
console.log('newTaskBtn found, attaching listener');
newTaskBtn.addEventListener('click', (e) => {
e.preventDefault();
console.log('Add button clicked');
const taskFormName = document.querySelector('#taskName').value;
const taskFormDate = document.querySelector('#dueDate').value;
const taskFormPriority = document.querySelector('#priority').value;
const taskFormDescription = document.querySelector('#description').value;
console.log({
taskFormName,
taskFormDate,
taskFormPriority,
taskFormDescription
});
if (isEditing) {
addTask(taskFormName, taskFormDate, taskFormPriority, taskFormDescription);
isEditing = false;
editIndex = null;
newTaskBtn.textContent = 'Add';
} else {
addTask(taskFormName, taskFormDate, taskFormPriority, taskFormDescription);
}
form.reset();
dialog.close();
});
} else {
console.error('newTaskBtn not found!');
}
if (cancel) {
cancel.addEventListener('click', (event) => {
event.preventDefault();
form.reset();
dialog.close();
});
}
}
setupEventListeners();
// Function to open the edit dialog with the selected task's data
window.editTask = (task, index) => {
isEditing = true;
editIndex = index;
newTaskBtn.textContent = 'Update';
console.log('Editing task at index:', editIndex, task);
console.log('isEditing is now:', isEditing);
//Pre-fill form with existitng task data
document.querySelector('#taskName').value = task.name;
document.querySelector('#dueDate').value = task.date;
document.querySelector('#priority').value = task.priority;
document.querySelector('#description').value = task.note;
dialog.showModal();
};
}<header>
<nav>
<button class="tab addTaskBtn">Add task</button>
<button class="tab" id="myTasks">My tasks</button>
<button class="tab" id="todayTask">Today</button>
<button class="tab" id="upcomingTask">Upcoming </button>
<button class="tab" id="completedTask">Completed</button>
</nav>
<div class="projects-container">
<div class="projects">
<p class="projects-title">Projects</p>
<button class="projectsBtn">Add</button>
</div>
<div class="project-content"></div>
</div>
</header>
<main id="content">
<!--Tab switch, where task will be displayed-->
<div id="task-container"></div>
</main>
<dialog>
<form action="" method="get" class="form">
<input type="text" name="usersTaskName" placeholder="Write a task name" class="form-content" id="taskName">
<div class="form-content">
<label for="dueDate">Due date</label>
<button id="dueDate">calendar</button>
</div>
<div class="form-content">
<label for="priority">Priority</label>
<select name="priority" id="priority">
<option value="none">None</option>
<option value="high">High</option>
<option value="medium">Medium</option>
<option value="low">Low</option>
</select>
</div>
<div class="form-content">
<label for="description"></label>
<textarea name="description" id="description" placeholder="What is this task about?"></textarea>
</div>
<div class='form-buttons'>
<button class="newTask">Add</button>
<button class="cancel" formmethod="dialog">Cancel</button>
</div>
</form>
</dialog>