Espero si alguien pudiera ayudarme. Estoy trabajando en la creación de una simple lista de tareas pendientes. Estoy creando y agregando li a ul pero no se muestra. Agradecería si alguien tiene el tiempo para explicarme lo que estoy haciendo mal.
const todoInput = document.querySelector(".todo-input"); const todoButton = document.querySelector(".todo-button"); const todoList = document.querySelector(".todo-list"); const addTodoItem =(e) => { e.preventDefault(); //prevent default behavior of submitting the form when clicked const todoDiv = document.createElement('div'); //Create div to hold list and delete button const todoLi = document.createElement('li'); //create li todoLi.innerText = todoInput.value; //give it value from user's input todoDiv.appendChild(todoLi); //append li to div holding it todoInput.value = ''; //clear form after adding input to list const deleteBtn = document.createElement('button'); //create delete btn todoDiv.appendChild(deleteBtn); //append delete bth to div holding it todoList.appendChild(todoDiv); //appned div to todos } //add event listener to add button todoButton.addEventListener('submit', addTodoItem); <!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>MyTodo</title> </head> <body> <h1> To do List</h1> <form > <input type="text" class="todo-input" /> <button class="todo-button" type="submit"> Add </button> </form> <div class ="todo-container"> <ul class="todo-list"> </ul> </div> <script src="./app.js"></script> </body> </html>El problema es que está aplicando un oyente de submit a un botón, que no tiene un evento de submit . El FORM tiene un evento de envío y funcionaría perfectamente con su línea preventDefault .
document.querySelector('form').addEventListener('submit', addTodoItem); const todoInput = document.querySelector(".todo-input"); const todoButton = document.querySelector(".todo-button"); const todoList = document.querySelector(".todo-list"); const addTodoItem = (e) => { e.preventDefault(); //prevent default behavior of submitting the form when clicked const todoDiv = document.createElement('div'); //Create div to hold list and delete button const todoLi = document.createElement('li'); //create li todoLi.innerText = todoInput.value; //give it value from user's input todoDiv.appendChild(todoLi); //append li to div holding it todoInput.value = ''; //clear form after adding input to list const deleteBtn = document.createElement('button'); //create delete btn todoDiv.appendChild(deleteBtn); //append delete bth to div holding it todoList.appendChild(todoDiv); //appned div to todos } //add event listener to add button document.querySelector('form').addEventListener('submit', addTodoItem); <h1> To do List</h1> <form> <input type="text" class="todo-input" /> <button class="todo-button" type="submit"> Add </button> </form> <div class="todo-container"> <ul class="todo-list"> </ul> </div>.todo-button no tiene evento de envío , el elemento con evento de envío es <form> .
Cree una clase para el elemento <form> :
<form class="todo-form">Crea una variable para el formulario:
const todoForm = document.querySelector(".todo-form");Luego agregue un detector de eventos:
todoForm.addEventListener('submit', addTodoItem);Código completo:
const todoForm = document.querySelector(".todo-form"); const todoInput = document.querySelector(".todo-input"); const todoButton = document.querySelector(".todo-button"); const todoList = document.querySelector(".todo-list"); const addTodoItem = (e) => { e.preventDefault(); //prevent default behavior of submitting the form when clicked const todoDiv = document.createElement('div'); //Create div to hold list and delete button const todoLi = document.createElement('li'); //create li todoLi.innerText = todoInput.value; //give it value from user's input todoDiv.appendChild(todoLi); //append li to div holding it todoInput.value = ''; //clear form after adding input to list const deleteBtn = document.createElement('button'); //create delete btn todoDiv.appendChild(deleteBtn); //append delete bth to div holding it todoList.appendChild(todoDiv); //appned div to todos } //add event listener to add button todoForm.addEventListener('submit', addTodoItem); <!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>MyTodo</title> </head> <body> <h1> To do List</h1> <form class="todo-form"> <input type="text" class="todo-input" /> <button class="todo-button" type="submit"> Add </button> </form> <div class ="todo-container"> <ul class="todo-list"> </ul> </div> <script src="./app.js"></script> </body> </html>