mi primera pregunta aquí!
Estoy tratando de hacer una lista de tareas, donde cada tarea se representa como un li. Tengo un campo de entrada de texto y un botón de envío, pero no sé cómo obtener el valor de texto del campo de entrada y agregarlo a la lista.
Esto es lo que tengo hasta ahora, estoy seguro de que es completamente falso, ya que recién estoy comenzando:
const submitButton = document.getElementById('submitButton'); let toDoText = document.getElementById('toDoText').value; function addToDo() { submitButton.addEventListener('click', function() { let Li = document.getElementsByClassName('todo'); let toDoText = document.getElementById('toDoText').value; for (let i = 0; i < Li.length; i++) { form.push(toDoText); } }) } <h1>TO-DO List</h1> <form id="form"> <input type="text" placeholder="Write your todo" id="toDoText"> <input type="submit" id="submitButton"> </form> <li class="todo">Example 1</li> <li class="todo">Example 2</li>Dale a tus elementos <li> un elemento principal, de modo que
<ul id="toDo"> <li class="todo">Example 1</li> <li class="todo">Example 2</li> </ul>Luego, haga clic en, cree un nuevo li, rellénelo con el valor de entrada y agréguelo al padre.
submitButton.addEventListener('click', function () { let newLi = document.createElement("li"); li.innerText = document.getElementById('toDoText').value; document.getElementById("toDo").appendChild(newLi); });Mi recomendación es usar createElement('li') y establecer el texto(valor) del elemento creado usandocreateTextNode(input.value) . Finalmente, tiene que insertar el elemento de tareas pendientes, por lo que usamos insertBefore(newElm, currentElm) .
const submitButton = document.getElementById('submitButton'); function addToDo() { // We select a container so we can insert our todo items in it let container = document.querySelector('div'); // We get the value from the input let input = document.querySelector('#toDoText').value; // We create an element for each gotten input value const todo = document.createElement("li"); // We set the text(value) of the todo item(li) const txt = document.createTextNode(input); // We append the text(value) to do created element(li) todo.appendChild(txt); // Finally we insert the last result(todo with value) inside the container(div) document.body.insertBefore(todo, container); }; // We run the function submitButton.addEventListener('click', addToDo); // We prevent the form submit so we don't get any errors or blank page document.querySelector("form").addEventListener('submit', e => e.preventDefault()); <form id="form"> <input type="text" placeholder="Write your todo" id="toDoText"> <input type="submit" id="submitButton"> </form> <div> </div>He cambiado un poco tu código agregando la explicación.
En primer lugar, como solo tiene el botón de envío, puede usar el detector de eventos de envío en el formulario mismo.
luego evite que la página se vuelva a cargar cuando se presione el botón Enviar con .preventDefault() . Puede leer más sobre esto aquí .
para obtener el valor del formulario, usaremos el nombre en lugar de la identificación, es casi el mismo código que usó, pero en su lugar puede usar todoForm.elements[FIELDNAME]
Mientras que para crear los nuevos elementos dentro de la lista, puede usar una cadena literal donde al cerrar la cadena entre `` puede pasarle variables cerrando luego en ${VARIABLE}
Con .innerHTML += vamos a agregar esa cadena como HTML como último elemento.
const todoForm = document.forms["todoForm"]; // getting form DOM via it's name todoForm.addEventListener('submit', addToDo); // adding submit listener to the form function addToDo(evt) { evt.preventDefault(); // preventing the page to be reloaded after submit const list = document.getElementById('todoList'); let toDoText = todoForm.elements["todoText"].value // getting value from input with todoText name list.innerHTML += `<li class="todo">${toDoText}</li>` // appending li element to todoList by using string literal todoForm.reset(); // resetting the form to the user can add new data. } <h1>TO-DO List</h1> <form name="todoForm"> <input type="text" placeholder="Write your todo" name="todoText"> <input type="submit"> </form> <ul id="todoList"> <li class="todo">Example 1</li> <li class="todo">Example 2</li> </ul>