I'm currently working on developing a JavaScript todo list. Despite my limited experience with JavaScript, I have been facing a recurring issue for several days now. Every time I attempt to update the data in my todo list, it always updates the information of the first list item instead of the one I intended to modify. If anyone could provide a solution to this problem, I would greatly appreciate it.
Below is a snippet of my code:
window.addEventListener('load', () => {
const form = document.querySelector("#form");
const input_text = document.querySelector("#text");
const list_ele = document.querySelector(".tasks");
const add = document.querySelector(".add-task");
form.addEventListener('submit', (e) => {
e.preventDefault();
let text = input_text.value;
let task = document.createElement("div");
task.classList.add("task");
let task_content = document.createElement("div");
task_content.classList.add("content");
task.appendChild(task_content);
let output = document.createElement("input");
output.classList.add("task-added")
output.value = text;
output.type = "text";
output.setAttribute("readonly", "readonly");
task_content.appendChild(output);
let actions = document.createElement("div");
actions.classList.add("actions");
task.appendChild(actions);
let edit = document.createElement("button");
edit.classList.add("edit");
edit.innerHTML = "Edit";
actions.appendChild(edit);
let DELETE = document.createElement("button");
DELETE.classList.add("delete");
DELETE.innerHTML = "Delete";
actions.appendChild(DELETE);
if (add.value === "add-task")
list_ele.appendChild(task);
input_text.value = "";
edit.addEventListener('click', (e) => {
add.value = "Save";
input_text.focus();
input_text.value = output.value;
add.addEventListener('click', () => {
if (add.value === "Save") {
let targets = e.target;
targets.parentElement.previousElementSibling.firstElementChild.value = input_text.value;
add.value = "add-task";
input_text.value = "";
}
});
});
})
})* {
box-sizing: border-box;
}
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: rgba(255, 255, 255, 0.918);
}
header {
display: flex;
flex-direction: column;
gap: 20px;
justify-content: center;
align-items: center;
}
#form {
display: flex;
gap: 5px;
flex-direction: row;
justify-content: center;
align-items: center;
}
header h1 {
color: orangered;
}
#form #text {
padding: 10px;
border-radius: 10px;
background-color: orange;
color: black;
border: none;
outline: none;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
}
#form .add-task {
padding: 10px;
border: none;
outline: none;
border-radius: 10px;
color: black;
background-color: orangered;
cursor: pointer;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
}
.tasks {
display: flex;
gap: 5px;
flex-direction: column;
justify-content: center;
align-items: center;
}
.task {
padding: 20px;
display: flex;
background-color: orangered;
gap: 10px;
border-radius: 5px;
flex-direction: row;
justify-content: center;
align-items: center;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
}
.task .content .task-added {
outline: none;
border: none;
color: black;
padding: 10px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
}
.task .content .task-added:not(:read-only) {
color: rgb(247, 2, 2);
}
.task .actions .edit {
cursor: pointer;
outline: none;
background-color: black;
border-radius: 5px;
padding: 10px;
border: none;
color: orangered;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
}
.task .actions {
display: flex;
flex-direction: row;
gap: 10px;
}
.task .actions .delete {
cursor: pointer;
background-color: black;
outline: none;
border-radius: 5px;
padding: 10px;
border: none;
color: orangered;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
}<header id="header">
<h1>Todo-list</h1>
<form id="form">
<input type="text" id="text" required>
<input type="submit" class="add-task" value="add-task">
</form>
</header>
<section>
<div class="tasks">
<h2>Tasks</h2>
<!--<div class="task">
<div class="content">
<input type="text" class="task-added" readonly>
</div>
<div class="actions">
<input type="button" class="edit" value="Edit">
<input type="button" class="delete" value="Delete">
</div>
</div>
!-->
</div>
</section>