Estoy tratando de crear una página web de tipo lista de tareas y me encontré con este problema. Básicamente, cuando cambio o actualizo el elemento de la lista, la lista no se actualiza y sigue recorriendo los primeros 2 botones en su html predeterminado
índice.html:
<body> <script src="script.js" defer></script> <link href="styles.css"> <div id="essentials"></div> <h2>ToDoList</h2> <input id="essentialInput"> <button id="addTask">Add Task</button> </div> <list id="list"> <h3 id="0">something epic <button class="deleteButton" id="0">Delete</button></h3> <h3 id="1">Something else <button class="deleteButton" id="1">Delete</button></h3> </list> </body>secuencia de comandos.js:
const essentialInput = document.getElementById('essentialInput') const addTaskButton = document.getElementById('addTask') const list = document.getElementById('list') let button = document.querySelectorAll('.deleteButton') addTaskButton.addEventListener('click', function() { text = essentialInput.value if(text == null) return "Nothing in input field" children = list.childElementCount list.innerHTML += `<h3 id=${children}>${text} <button class="deleteButton" id=${children}>Delete</button></h3>` }) for(let i = 0; i<button.length; i++) { button[i].addEventListener('click', function() { console.log(button[i].id) }) }Conozco el problema, pero no sé cómo solucionarlo. Intenté colocar el botón eventListeners en un detector de eventos de cambio para cuando la lista cambie, pero luego no sucede nada hasta que hago clic en el botón Eliminar.
El problema es que usar el operador += en el HTML interno de un elemento NO innerHTML solo concatenar el nuevo HTML... Lo reemplaza por completo con el resultado.
Es por eso que estaba perdiendo los oyentes ya establecidos en los dos primeros <h3> .
Luego, el nuevo <h3> nunca tuvo oyentes.
Entonces, la solución para este caso es registrar el detector de eventos en el padre estático en nombre de sus hijos... Y aprovechar el burbujeo de eventos. Eso se llama delegación de eventos.
const essentialInput = document.getElementById('essentialInput') const addTaskButton = document.getElementById('addTask') const list = document.getElementById('list') let button = document.querySelectorAll('.deleteButton') addTaskButton.addEventListener('click', function() { text = essentialInput.value if(text == null) return "Nothing in input field" children = list.childElementCount list.innerHTML += `<h3 id=${children}>${text} <button class="deleteButton" id=${children}>Delete</button></h3>` }) // Add the event listener on the static parent list.addEventListener("click", function(e){ if(e.target.classList.contains("deleteButton")){ console.clear() console.log(e.target.id) } }) <body> <script src="script.js" defer></script> <link href="styles.css"> <div id="essentials"></div> <h2>ToDoList</h2> <input id="essentialInput"> <button id="addTask">Add Task</button> </div> <list id="list"> <h3 id="0">something epic <button class="deleteButton" id="0">Delete</button></h3> <h3 id="1">Something else <button class="deleteButton" id="1">Delete</button></h3> </list> </body>