Estoy haciendo un proyecto básico de Lista de tareas pendientes donde el valor de la entrada de texto debe agregarse a una lista desordenada que contiene todos los atributos de 3 elementos de lista codificados.
Llegué a agregar el valor del campo de entrada a la lista, pero cada tarea posterior se duplica. Agregaré el código a continuación. Soy bastante nuevo en la programación, así que disculpe el código jajaja. Gracias por adelantado.
<body> <div class="todo-area"> <div class="add-area"> <h1 id="list-name">To-Do List</h1> <label for="todo"></label> <input type="text" name="todo" id="input-task"> <button type="submit" id="add-task-button" onclick="add()">Add Task</button> </div> <div class="list-area"> <ul id="task-list"> <li class="li-input"><input type="checkbox" id="check"><span class="task">Email David</span><button class="delete-btn">X</button></li> <li class="li-input"><input type="checkbox" id="check"><span class="task">Create ideal persona guide</span><button class="delete-btn">X</button></li> <li class="li-input"><input type="checkbox" id="check"><span class="task">Set up A/B test</span><button class="delete-btn">X</button></li> </ul> </div> </div> <script src="app.js"></script> </body> function add(){ document.getElementById("add-task-button").addEventListener("click", function (event) { let textValue = document.getElementById("input-task").value; let tlist = document.getElementById("task-list"); let newLi = `<li class="li-input"><input type="checkbox" id="check"><span class="task">${textValue}</span><button class="delete-btn">X</button></li>`; tlist.insertAdjacentHTML("beforeend", newLi); event.preventDefault(); }); }Cada vez que hace clic en el botón, está agregando un NUEVO detector de eventos al botón que agregará su nuevo elemento.
Una solución simple es no agregar el detector de eventos ya que su onClick en su elemento de botón ya hace que la función de agregar se ejecute al hacer clic.
Esencialmente reemplace el JS con:
function add(){ let textValue = document.getElementById("input-task").value; let tlist = document.getElementById("task-list"); let newLi = `<li class="li-input"><input type="checkbox" id="check"><span class="task">${textValue}</span><button class="delete-btn">X</button></li>`; tlist.insertAdjacentHTML("beforeend", newLi); event.preventDefault(); }