En mi proyecto de lista de tareas pendientes, tengo una función en la que filtro las cosas que se han hecho y las cosas que se harán. Sin embargo, cuando quiero agregar un nuevo elemento a la lista, los nuevos también vienen con elementos de lista prefiltrados. ¿Qué debo hacer para que solo funcione el código recién agregado cuando ocurre una adición durante el filtrado?
form.addEventListener("submit", function(e) { e.preventDefault(); const value = document.getElementById("add-input").value; const newItem = { title: value, id: Math.random().toString(36).substring(2, 10), isDone: false, }; todos.push(newItem); localStorage.setItem("todos", JSON.stringify(todos)); section.innerHTML = todos.map((item) => todoItem(item)).join(""); document.getElementById("add-input").value = ""; }); filtered.addEventListener("change", function(e) { let filteredTodos = todos; if (e.target.value === "done") { filteredTodos = todos.filter((item) => item.isDone === true); } if (e.target.value === "todo") { filteredTodos = todos.filter((item) => item.isDone === false); } section.innerHTML = filteredTodos.map((item) => todoItem(item)).join(""); }); <form id="todo-form"> <input required id="add-input" type="text" placeholder="Bir yapılacak nesnesi ekleyin.." /> <button id="add-btn" type="submit">Ekle</button> </form> <section id="filter-list"> <div id="filter-title">Filtrele:</div> <select id="dropdown"> <option value="all">Tümü</option> <option value="todo">Yapılacak</option> <option value="done">Yapıldı</option> </select> </section>Un buen comienzo sería aislar toda la lógica para crear su lista de tareas pendientes en una función de representación. Cada vez que cambia algo en el estado interno de su aplicación, llama a la función de representación y puede estar seguro de que los resultados son consistentes.
Aquí hay un cambio mínimo para que funcione:
// Setup const form = document.querySelector("form"); const filter = document.getElementById("dropdown"); const newTodoInput = document.getElementById("add-input"); const section = document.querySelector("ul"); const todoItem = ({ title, isDone, id }) => `<li> ${isDone ? `<s>${title}</s>` : title}</li>`; // State const todos = [ { title: "Fix code snippet", isDone: true, id: "1" }, { title: "Write own front-end framework", isDone: false, id: "2" } ]; // Render logic const renderTodos = () => { let filteredTodos = todos; // Apply current filter const filterValue = filter.value; if (filterValue === "done") { filteredTodos = todos.filter((item) => item.isDone === true); } if (filterValue === "todo") { filteredTodos = todos.filter((item) => item.isDone === false); } // Render to page section.innerHTML = filteredTodos.map((item) => todoItem(item)).join(""); } form.addEventListener("submit", function(e) { e.preventDefault(); const value = document.getElementById("add-input").value; const newItem = { title: value, id: Math.random().toString(36).substring(2, 10), isDone: false, }; todos.push(newItem); document.getElementById("add-input").value = ""; renderTodos(); }); filter.addEventListener("change", renderTodos); // Initial render renderTodos(); <form id="todo-form"> <input required id="add-input" type="text" placeholder="What do you need to do?" /> <button id="add-btn" type="submit">Create</button> </form> <section id="filter-list"> <div id="filter-title">Filter:</div> <select id="dropdown"> <option value="all">All</option> <option value="todo">To do</option> <option value="done">Done</option> </select> </section> <ul> </ul>Si su aplicación sigue creciendo, podría valer la pena separar estrictamente el estado de la interfaz de usuario. Por ejemplo, puede almacenar el valor de su filtro en javascript, y en su función de representación asegúrese de que el menú desplegable esté sincronizado. Eso le permitiría restablecer fácilmente un filtro en JS y simplemente llamar a renderizar para que aparezca en la interfaz de usuario.