我如何找到我的唯一 ID 并通过 e.target 定位它以更改生成的 Div 中的某些内容？

Question

im working on a ToDoList. Whenever you add a task it generates a DIV which also creates a uniqueID. I need to target a checkbox in that unique Div and if its checked change background color of input and if it is not checked to go back to normal.

The way i had it set up originally didn't work because if i had more than 1 checkbox, everything would stop working. After doing some research and creating unique ID, how can I target it without knowing what it is?

Basically something like e.target.parentElement and that unique ID, then if it is checked > change background color, if its clicked again and unchecked, that means the task is not finished.

Someone suggested to use data-id for id and then target it with querySelector but i am not sure what that looks like exactly.

Thank you so much!

Please see code below.

 const addButton = document.querySelector(".todo-button"); const toDoInput = document.querySelector(".todo-input"); const toDoUi = document.querySelector(".todo-list"); const editBtn = document.querySelector("edit-btn"); addButton.addEventListener("click", addToDoItem); toDoUi.addEventListener("click", deleteItem); toDoUi.addEventListener("click", completeItem); toDoUi.addEventListener("click", editItem); let randomId = ""; function getRandomId() { randomId = new Date().getTime().toString(); } getRandomId(); function addToDoItem(event) { event.preventDefault(); const div = document.createElement("div"); div.classList.add("todo"); const li = document.createElement("li"); li.innerHTML = ` <input type="checkbox" class="checkbox" name="checkbox" id="${randomId}"> <input type="text" class="generated-input" value="${toDoInput.value}" disabled="disabled">`; li.classList.add("todo-item"); div.append(li); getRandomId(); const editButton = document.createElement("button"); editButton.classList.add("edit-btn"); editButton.innerText = "Edit"; div.append(editButton); const deleteButton = document.createElement("button"); deleteButton.classList.add("delete-btn"); deleteButton.innerText = `Delete`; div.append(deleteButton); toDoUi.append(div); toDoInput.value = ""; } function deleteItem(e) { if (e.target.classList[0] === "delete-btn") { const todo = e.target.parentElement; todo.remove(); } } function editItem(e) { if (e.target.classList[0] === "edit-btn") { e.target.parentElement.querySelector(".generated-input").disabled = false; e.target.parentElement.querySelector(".generated-input").focus(); e.target.classList.add("hideBtn"); const saveButton = document.createElement("button"); saveButton.className = "save-btn"; saveButton.innerText = "Save"; e.target.parentElement.firstChild.append(saveButton); document.querySelector(".save-btn").addEventListener("click", saveItem); function saveItem() { e.target.parentElement.querySelector(".generated-input").disabled = true; e.target.parentElement.querySelector(".save-btn").remove(); e.target.parentElement.querySelector(".edit-btn").classList.remove("hideBtn"); } } } function completeItem(e) { const checkedMark = document.querySelector('input[type="checkbox"]:checked'); if (checkedMark) { e.target.closest(".todo").querySelector(".generated-input").classList.add("test"); } if (document.querySelector('input[type="checkbox"]')) console.log("working"); }

 * { margin: 0; padding: 0; font: inherit; } body, html { min-width: 100%; min-height: 100vh; box-sizing: border-box; font-size: 100%; background-color: #312c56; font-family: "Montserrat"; } img, picture, svg, video { max-width: 100%; display: block; }.width-restriction { max-width: 1200px; margin: 0 auto; }.main-container { display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 0 auto; background-color: hsla(0, 6%, 93%, 0.803); width: 100%; border-radius: 15px; } header { padding: 0.8em; font-size: 3rem; text-align: center; font-weight: 700; }.todo-input { width: 70%; background-color: #ffffff; color: black; padding: 0.5em 1em; font-size: 1.5rem; border-radius: 15px; border-style: none; } textarea:focus, input:focus { outline-color: #e348c4; } form { width: 100%; display: flex; justify-content: center; gap: 10px; } h3 { padding: 1em; font-size: 2rem; font-weight: 700; }.todo-button { width: 10%; border-radius: 15px; border: none; background-color: #e348c4; color: white; text-transform: uppercase; font-size: 1rem; }.todo-button:hover { width: 10%; border-radius: 15px; border: none; background-color: #ba00fd; color: white; text-transform: uppercase; font-size: 1rem; cursor: pointer; }.todo-list { width: 100%; }.todo-item { width: 100%; padding: 1em; }.todo-container { display: flex; width: 100%; }.todo { display: flex; padding: 1rem; gap: 1rem; justify-content: center; align-items: center; width: 100%; box-sizing: border-box; }.edit-btn, .delete-btn, .save-btn { width: 12%; height: 2rem; border-radius: 15px; border: none; background-color: #e348c4; color: white; text-transform: uppercase; font-size: 1rem; cursor: pointer; }.edit-btn:hover, .delete-btn:hover, .save-btn:hover { background-color: #ba00fd; }.generated-input { width: 100%; background-color: #ffffff; color: black; padding: 0.5em 1em; font-size: 1.5rem; border-radius: 15px; border-style: none; } li { display: flex; align-items: center; justify-content: center; width: 76%; gap: 1rem; padding-left: 7em; }.checkbox { width: 2.5rem; height: 2.5rem; }.completed { font-size: 1.5rem; }.hideBtn { display: none; }.save-btn { padding: none; } input[type="checkbox"] { appearance: none; -webkit-appearance: none; height: 2em; width: 2em; background-color: #ffffff; border-radius: 5px; cursor: pointer; content: "\002714"; } input[type="checkbox"]:hover { background-color: lightgreen; opacity: 0.5; content: ""; } input[type="checkbox"]:checked { background-color: lightgreen; opacity: 1; } input[type="checkbox"]:checked::after { display: flex; align-items: center; justify-content: center; content: "\002714"; font-size: 20px; }.test { background-color: lightgreen; text-decoration: line-through; }

 <section class="main-container width-restriction"> <header>Alex's To Do List</header> <form> <input type="text" class="todo-input"> <button class="todo-button" type="submit">Add ToDo</button> </form> <h3>Tasks</h3> <div class="todo-container"> <ul class="todo-list"></ul> </div> </section>

Answer 1

Select the input element in the completeItem function and add/remove the .test class to it. i made some changes to your completeItem function below.

 const addButton = document.querySelector(".todo-button"); const toDoInput = document.querySelector(".todo-input"); const toDoUi = document.querySelector(".todo-list"); const editBtn = document.querySelector("edit-btn"); addButton.addEventListener("click", addToDoItem); toDoUi.addEventListener("click", deleteItem); toDoUi.addEventListener("click", completeItem); toDoUi.addEventListener("click", editItem); let randomId = ""; function getRandomId() { randomId = new Date().getTime().toString(); } getRandomId(); function addToDoItem(event) { event.preventDefault(); const div = document.createElement("div"); div.classList.add("todo"); const li = document.createElement("li"); li.innerHTML = ` <input type="checkbox" class="checkbox" name="checkbox" id="${randomId}"> <input type="text" class="generated-input" value="${toDoInput.value}" disabled="disabled">`; li.classList.add("todo-item"); div.append(li); getRandomId(); const editButton = document.createElement("button"); editButton.classList.add("edit-btn"); editButton.innerText = "Edit"; div.append(editButton); const deleteButton = document.createElement("button"); deleteButton.classList.add("delete-btn"); deleteButton.innerText = `Delete`; div.append(deleteButton); toDoUi.append(div); toDoInput.value = ""; } function deleteItem(e) { if (e.target.classList[0] === "delete-btn") { const todo = e.target.parentElement; todo.remove(); } } function editItem(e) { if (e.target.classList[0] === "edit-btn") { e.target.parentElement.querySelector(".generated-input").disabled = false; e.target.parentElement.querySelector(".generated-input").focus(); e.target.classList.add("hideBtn"); const saveButton = document.createElement("button"); saveButton.className = "save-btn"; saveButton.innerText = "Save"; e.target.parentElement.firstChild.append(saveButton); document.querySelector(".save-btn").addEventListener("click", saveItem); function saveItem() { e.target.parentElement.querySelector(".generated-input").disabled = true; e.target.parentElement.querySelector(".save-btn").remove(); e.target.parentElement.querySelector(".edit-btn").classList.remove("hideBtn"); } } } function completeItem(e) { const itemWrapper = e.target.closest(".todo"); if(;itemWrapper) return. const checkedMark = itemWrapper;querySelector("[type=checkbox]"). const input = itemWrapper.querySelector("[type=text]") if (checkedMark.checked) input.classList;add("test"). else input.classList;remove("test"); }

 * { margin: 0; padding: 0; font: inherit; } body, html { min-width: 100%; min-height: 100vh; box-sizing: border-box; font-size: 100%; background-color: #312c56; font-family: "Montserrat"; } img, picture, svg, video { max-width: 100%; display: block; }.width-restriction { max-width: 1200px; margin: 0 auto; }.main-container { display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 0 auto; background-color: hsla(0, 6%, 93%, 0.803); width: 100%; border-radius: 15px; } header { padding: 0.8em; font-size: 3rem; text-align: center; font-weight: 700; }.todo-input { width: 70%; background-color: #ffffff; color: black; padding: 0.5em 1em; font-size: 1.5rem; border-radius: 15px; border-style: none; } textarea:focus, input:focus { outline-color: #e348c4; } form { width: 100%; display: flex; justify-content: center; gap: 10px; } h3 { padding: 1em; font-size: 2rem; font-weight: 700; }.todo-button { width: 10%; border-radius: 15px; border: none; background-color: #e348c4; color: white; text-transform: uppercase; font-size: 1rem; }.todo-button:hover { width: 10%; border-radius: 15px; border: none; background-color: #ba00fd; color: white; text-transform: uppercase; font-size: 1rem; cursor: pointer; }.todo-list { width: 100%; }.todo-item { width: 100%; padding: 1em; }.todo-container { display: flex; width: 100%; }.todo { display: flex; padding: 1rem; gap: 1rem; justify-content: center; align-items: center; width: 100%; box-sizing: border-box; }.edit-btn, .delete-btn, .save-btn { width: 12%; height: 2rem; border-radius: 15px; border: none; background-color: #e348c4; color: white; text-transform: uppercase; font-size: 1rem; cursor: pointer; }.edit-btn:hover, .delete-btn:hover, .save-btn:hover { background-color: #ba00fd; }.generated-input { width: 100%; background-color: #ffffff; color: black; padding: 0.5em 1em; font-size: 1.5rem; border-radius: 15px; border-style: none; } li { display: flex; align-items: center; justify-content: center; width: 76%; gap: 1rem; padding-left: 7em; }.checkbox { width: 2.5rem; height: 2.5rem; }.completed { font-size: 1.5rem; }.hideBtn { display: none; }.save-btn { padding: none; } input[type="checkbox"] { appearance: none; -webkit-appearance: none; height: 2em; width: 2em; background-color: #ffffff; border-radius: 5px; cursor: pointer; content: "\002714"; } input[type="checkbox"]:hover { background-color: lightgreen; opacity: 0.5; content: ""; } input[type="checkbox"]:checked { background-color: lightgreen; opacity: 1; } input[type="checkbox"]:checked::after { display: flex; align-items: center; justify-content: center; content: "\002714"; font-size: 20px; }.test { background-color: lightgreen; text-decoration: line-through; }

 <section class="main-container width-restriction"> <header>Alex's To Do List</header> <form> <input type="text" class="todo-input"> <button class="todo-button" type="submit">Add ToDo</button> </form> <h3>Tasks</h3> <div class="todo-container"> <ul class="todo-list"></ul> </div> </section>