Este es mi primer proyecto. Estoy tratando de hacer una lista simple de cosas por hacer para practicar. Uno escribe algo, cualquier cosa, en un texto de tipo de entrada y se supone que debe aparecer a continuación como una lista numerada. Justo al lado del elemento en la lista, se supone que hay otro botón que elimina el elemento.
¿Cómo hago para que sea una lista numerada a medida que agrego elementos a través del texto de entrada y cómo, al mismo tiempo, agrego botones de entrada junto con el elemento? ¿Cómo evito que agregue elementos cuando el texto de entrada aún está vacío?
Mi código hasta ahora:
HTML
<div> <input type="text" placeholder="Add an item!" id="text1" class="text1" /> <input type="button" value="Submit" id="button1" /> <input type="button" value="Clear List" id="button2" /> <p id="write"></p> </div>JS
var input2 = document.getElementById("button1"); input2.addEventListener("click", addStuff); function addStuff() { todo = text1.value; add.innerHTML += todo + "<br />"; }Echa un vistazo a la etiqueta de lista ordenada . maneja la lista numerada de forma predeterminada, cada elemento dentro de ella debe estar en una etiqueta <li> .
en su función addStuff , necesitaría 1. obtener el elemento ol , 2. agregar dentro de él un nuevo li para cada elemento que desee.
Utilice este código.
var submitButton = document.getElementById("button1"); var clearButton = document.getElementById("button2"); var add = document.getElementById("write"); submitButton.addEventListener("click", addStuff); clearButton.addEventListener("click", clear); function addStuff() { todo = text1.value; if(todo == "") { alert("Please input data"); } else { add.innerHTML += "<li>" + todo + "</li>"; } } function clear() { add.innerHTML = ""; } ol { list-style-type: decimal; } <div> <input type="text" placeholder="Add an item!" id="text1" class="text1"> <input type="button" value="Submit" id="button1"> <input type="button" value="Clear List" id="button2"> <ol id="write"></ol> </div>Te animo a crearlo por tu cuenta con la ayuda de la siguiente lista. Pero si te quedas atascado, puedes usar un código ya hecho .
<ol> a la que se agregarán las notas.innerHTML .remove() .addStuff , tome el valor del campo de texto. Luego cree un button y li con el método createElement , agregue los atributos necesarios a cada uno de ellos y agregue button a li y li a la lista ol .