Soy un principiante que está aprendiendo JavaScript en este momento y quiero hacer una aplicación de tareas pendientes como mi primer proyecto en javascript, pero parece haber algunas complicaciones. En primer lugar, puedo crear una lista vacía que se supone que no debe ocurrir. En segundo lugar, no puedo eliminar una sola lista de tareas pendientes. Sé que mi código no está bien, pero estaré feliz si alguien puede resolverlo de esta manera. Gracias de antemano código fuente a continuación
HTML CODE <div><input type ="text"id="input-el" placeholder="Enter your list of to do here..."> <button id="save-el">createlist</button> <button id="delete-el">Delete list </button> <div> <ul id="ul-el"></ul> //Javascript CODE let todo = []; let inputEl = document.getElementById("input-el"); const saveEl = document.getElementById("save-el"); const deleteEl = document.getElementById("delete-el"); const xEl = document.getElementById("x-el"); let items= document.getElementById("items"); let ulEl = document.getElementById("ul-el"); let listItems = "" //FUNCTION USE TO ADD NEW TO-DO LIST function myfunc(){ let listItems = "" for(let i=0;i<todo.length;i++) { listItems += ` <li id='${items}'><span> <input class='check' type ='checkbox'></span>${todo[i]} <button id='x-el'>x</button></li> ` } ulEl.innerHTML = listItems;} //SAVE TO-DO LIST if(inputEl !== ""){ saveEl.addEventListener("click",function(){ todo.push(inputEl.value); inputEl.value = ""; myfunc() }) } else { alert("can't create an empty list") } //TO DELETE ALL TO-DO LIST deleteEl.addEventListener("dblclick",function(){ todo = []; saveEl.value = ""; inputEl.value = ""; myfunc() }) //TO REMOVE A SINGLE TO-DO LIST FROM ALL LIST /*items.addEventListener('click', function(e) { this.removeChild(e.target); })*/Comento algunos códigos cuando no funciona, estaré feliz si puede resolver este problema usando mi enfoque
Este proyecto se puede realizar sin usar una matriz para almacenar tareas. Espero que esto resuelva tu problema.
<html> <body> <input type="text" id="inputEl" placeholder="Enter your list of to do here..."> <button id="saveEl">createlist</button> <button id="deleteEl">Delete list</button> <ul id="ulEl"></ul> <script> let inputEl = document.getElementById("inputEl") let saveEl = document.getElementById("saveEl") let ulEl = document.getElementById("ulEl") let deleteEl = document.getElementById("deleteEl") //ADD NEW ELEMENT TO LIST saveEl.addEventListener("click", function() { var task = document.createElement("li") task.innerText = inputEl.value ulEl.appendChild(task) //REMOVE SINGLE TASK task.addEventListener("click", function() { ulEl.removeChild(task) }) }) //DELETE ALL ELEMENTS deleteEl.addEventListener("dblclick", function() { ulEl.innerText = "" }) </script> </body>