Como en el tema, mi trabajo es hacer un código en el que el usuario escribe un texto en el cuadro de texto y cuando el usuario presiona la tecla Intro, el texto del cuadro de texto debe agregarse a la lista ul en el encabezado Cosas. También agregué el botón de reinicio, pero no funciona porque agregar elementos a la lista no funciona, pero creo que debería funcionar cuando lo arregle. No se donde me equivoque. Alguien podría ayudarme o aconsejarme que debo hacer?
<!DOCTYPE html> <html> <head> <title>List</title> </head> <body> <h1 id="title">List</h1> <form> <input type="text" id="user-todo" placeholder="List" required> </form> <h2 id="todo-header">Things</h2> <ul id="list"> </ul> <button id="clear">Reset</button> <script> var input = document.getElementById("user-todo"); input.addEventListener("keyup", function(event) { if (event.keyCode === 13) { event.preventDefault(); // what happens when user hits ENTER $(document).ready(function() { $('ul').append("<li>"+($('#user-todo').val()) + "</li>"); }); } }); function clear() { document.getElementById("list").innerHTML = ''; } </script> </body> </html>Parece que estás en un curso obsoleto, puedes aprender Modern JS en:
https://exploringjs.com/impatient-js/
Prescindiendo del uso de JQuery, un marco que ya no es necesario en estos días, obtienes:
const input = document.querySelector("#user-todo"); const clear = document.querySelector("#clear"); const list = document.querySelector("#list"); input.addEventListener("keyup", function(event) { if (event.keyCode === 13) { const li = document.createElement("li"); li.textContent = input.value; input.value = ""; list.appendChild(li); } }); clear.addEventListener("click", function() { list.innerHTML = ""; }); <!DOCTYPE html> <html> <head> <title>List</title> </head> <body> <h1 id="title">List</h1> <form onsubmit="return false;"> <input type="text" id="user-todo" placeholder="List" required> </form> <h2 id="todo-header">Things</h2> <ul id="list"></ul> <button id="clear">Reset</button> </body> </html>Si cambia esta línea, debería funcionar. https://codesandbox.io/s/exciting-sinoussi-ckw8b?file=/index.html
input.addEventListener("keydown", function (event) { <!DOCTYPE html> <html> <head> <title>List</title> </head> <body> <h1 id="title">List</h1> <input type="text" id="user-todo" placeholder="List" required> <h2 id="todo-header">Things</h2> <ul id="list"> </ul> <button onclick="clearFunction()">Reset</button> <script> function clearFunction() { document.getElementById("list").innerHTML = " "; } var input = document.getElementById("user-todo") var list = document.getElementById("list"); input.addEventListener("keyup", function (event) { if (event.keyCode === 13) { event.preventDefault(); var input_val = document.getElementById("user-todo").value; let li = document.createElement("li"); li.innerText = input_val; list.append(li); } }); </script> </body>