const submitButton = document.getElementById('submit'); const toDoList = document.querySelector('.to-do'); const newListItems = []; let itemExists = false; submitButton.addEventListener('click', function(){ const newInput = document.getElementById('new-item').value; newListItems.push(newInput); const newListItem = document.createElement('li'); newListItem.classList.add('to-do-item'); const latestInputText = newListItems[newListItems.length - 1]; const latestInputNumber = newListItems.indexOf(latestInputText) + 1; newListItem.textContent = latestInputNumber + '. ' + latestInputText; toDoList.appendChild(newListItem); itemExists = true; doesExist(); }); function doesExist(){ if(itemExists){ const toDo = document.querySelectorAll('.to-do-item'); for(let i = 0; i < toDo.length; i++){ toDo[i].addEventListener('click', function(){ this.classList.add('completed'); console.log('Clicked'); console.log(this); }); } } } <div class="list"> <input type="text" id="new-item" placeholder="Add Item"> <input type="submit" value="Add" id="submit"> <ul class="to-do"> </ul> </div> </div>Cuando hago clic en el primer elemento que agrego a mi lista de tareas, me hacen clic dos veces, y estoy un poco confundido por qué. Cualquier elemento que agregue después del primer elemento funciona absolutamente bien.
Aquí hay una versión de trabajo - explicación a continuación:
const submitButton = document.getElementById('submit'); const toDoList = document.querySelector('.to-do'); const newListItems = []; let itemExists = false; submitButton.addEventListener('click', function(){ const newInput = document.getElementById('new-item').value; newListItems.push(newInput); const newListItem = document.createElement('li'); newListItem.classList.add('to-do-item'); const latestInputText = newListItems[newListItems.length - 1]; const latestInputNumber = newListItems.indexOf(latestInputText) + 1; newListItem.textContent = latestInputNumber + '. ' + latestInputText; toDoList.appendChild(newListItem); addClickEventTo(newListItem); }); function addClickEventTo(toDoItem){ toDoItem.addEventListener('click', function(){ this.classList.add('completed'); console.log('Clicked'); console.log(this); }); } <div class="list"> <input type="text" id="new-item" placeholder="Add Item"> <input type="submit" value="Add" id="submit"> <ul class="to-do"> </ul> </div> Está aplicando el evento addEventListener() cada vez que agrega un nuevo elemento y es acumulativo. Cuando agrega 5 elementos, tendrá 5 clics para el primer elemento, 4 clics para el segundo elemento y así sucesivamente. El código modificado solo agrega addEventListener() al elemento creado.
<div class="list"> <input type="text" id="new-item" placeholder="Add Item"> <input type="submit" value="Add" id="submit"> <ul class="to-do"></ul> </div> <script> const submitButton = document.getElementById('submit'); const toDoList = document.querySelector('.to-do'); const newListItems = []; let itemExists = false; submitButton.addEventListener('click', function () { const newInput = document.getElementById('new-item').value; newListItems.push(newInput); const newListItem = document.createElement('li'); newListItem.classList.add('to-do-item'); const latestInputText = newListItems[newListItems.length - 1]; const latestInputNumber = newListItems.indexOf(latestInputText) + 1; newListItem.textContent = latestInputNumber + '. ' + latestInputText; newListItem.addEventListener('click', function () { this.classList.add('completed'); console.log(this); }); toDoList.appendChild(newListItem); itemExists = true; }); </script>