Estoy en un curso de programación y necesito crear una página de lista de "cosas por hacer" usando javascript y HTML. Cualquier cosa que el usuario escriba en el cuadro de texto debería aparecer debajo de un encabezado de "Lista de tareas pendientes" en la parte inferior de la página. Tengo problemas para que la información enviada en el formulario aparezca en la página debajo del encabezado de la lista de tareas pendientes. Aquí está mi código hasta ahora.
const formE1 = document.getElementById('todo-form'); const inputE1 = document.getElementById('todo-item'); const list = document.getElementById('to-do'); formE1.addEventListener('submit', function(event) { event.preventDefault(); const li = document.getElementById('the-list'); document.createElement('li'); inputE1.appendChild(li); console.log(formE1) }) const input = document.querySelector('ol'); let template = '' for (let i = 0; i < inputE1.length; i++) { const item = ` <li> <p>Name: ${inputE1}</p> </li> ` template += item; } input.innerHTML = template; <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Forms</title> </head> <body> <h1>Add a Todo</h1> <div id="todo-list"> <form id="todo-form"> <input type="text" id="todo-item" placeholder="List Item"/> <input type="submit" id="todo-add" value="Submit"/> </form> <div id="to-do"> <h2>To-Do List</h2> <ol id="the-list"></ol> </div> </div> <script src="main.js"></script> </body> </html>La clave es que estaba intentando ejecutar código fuera del controlador.
Puedes simplificar un poco tu código. No hay una necesidad real de un elemento de form , por ejemplo, así que agregue el oyente a su botón.
const button = document.querySelector('button'); const input = document.querySelector('input'); const list = document.querySelector('ol'); button.addEventListener('click', function(e) { const li = document.createElement('li'); li.textContent = input.value; list.appendChild(li); }); <h1>Add a Todo</h1> <div> <input type="text" placeholder="List Item" /> <button type="button">Submit</button> <div> <h2>To-Do List</h2> <ol></ol> </div> </div>