Súper novato aquí. Necesito crear una lista de compras que agregue un elemento a una lista, elimine el primer elemento de la lista o el último elemento de la lista y muestre estos resultados en una matriz en la parte inferior. El problema es que no puedo hacer que se muestren los elementos agregados, por lo que no puedo probar y ver si los comandos pop y shift funcionan como deberían.
Esto es lo que tengo en este momento
const groceries = []; document.getElementById("listAdd").addEventListener("click", listAdd); document.getElementById("displayList").innerHTML = ''; document.getElementById("deleteFirst").addEventListener("click", deleteFirst); document.getElementById("deleteLast").addEventListener("click", deleteLast); //add item to list function listAdd() { console.log(groceries.push()); } //delete first item in list function deleteFirst() { console.log(groceries.shift()); } //delete last item in list function deleteLast() { console.log(groceries.pop()); } //display list function display() { for (let i = 0; i < groceries.length; i++) { let item = groceries[i]; } } <h1>Grocery List</h1> <fieldset> <legend> Enter your shopping item below</legend> <span id="listAdd"></span> <input type="text" id="listAdd" value=><br> <input type="button" id="listAdd" value="Add to List"><br> </fieldset> <fieldset> <legend>Delete the first item in the array</legend> <span id="deleteFirst"></span> <input type="button" id="deleteFirst" value="Delete First Item"><br> </fieldset> <fieldset> <legend> Delete the last item in the array</legend> <span id="deleteLast"></span> <input type="button" id="deleteLast" value="Delete Last Item"><br> </fieldset> <fieldset> <span id="displayList"></span> <legend> Display array</legend> </fieldset>Creo que parte del problema podría ser que está configurando múltiples ID de elementos para lo mismo. Por ejemplo, tienes un lapso; entrada de texto; y la entrada del botón está configurada para el ID: "listAdd". El ID es la forma en que el árbol del documento identifica de forma única el elemento HTML, por lo que tienen que ser diferentes.
Como suposición, lo que desea es que la función "listAdd" se ejecute cuando haga clic en el botón correspondiente. Entonces, podrías hacer algo como...
<input type="button" id="listAddBtn" value="Add to List"><br>y luego ejecute su código para agregar el detector de eventos...
document.getElementById("listAddBtn").addEventListener("click", listAdd);pero en realidad, me resulta más sencillo simplemente escribir el HTML con el detector de eventos ya adjunto...
<input type="button" id="listAddBtn" value="Add to List" onclick="listAdd();"><br>Y tendría que actualizar esos ID para que sean únicos para todo. Como nota relacionada, el atributo "nombre" del elemento de formulario es lo que usa el código del lado del servidor para identificar el valor que se transmite, por lo que cambiaría sus entradas de texto para tener el atributo de nombre...
<input type="text" id="listAddVal" name="listAddVal" value=""><br>Espero que todo lo que sea útil.
Editar... Volviendo a leer su publicación para asegurarme de que estaba respondiendo correctamente y viendo las respuestas rápidas de Andreas, reiteraré lo que mencionó: la función de visualización simplemente recorre su lista. Debe agregar código dentro del bucle for que crea el HTML que desea mostrar y luego establecer la propiedad innerHTML de su elemento contenedor de visualización. Algo como...
//display list function display() { let dispElement = window.document.getElementById("displayList"); var dispHTML = "<ul>"; for (let i = 0; i < groceries.length; i++) { dispHTML += "<li>" + groceries[i] + "</li>"; } dispHTML += "</ul>"; dispElement.innerHTML = dispHTML; }Y mientras escribía eso, noté que sus métodos auxiliares para editar la matriz de comestibles no parecen agregar nada a las matrices. Necesitaría obtener el valor que está tratando de enviar (por ejemplo) desde el elemento de formulario, y luego pasarlo como parámetro a la función de envío...
function listAdd() { let addValElement = window.document.getElementById("listAddVal"); let addVal = addValElement.value; if (addVal.length > 0) { groceries.push(addVal); addValElement.value = ""; //clear the input since we already added it window.alert("added item [" + addVal + "] to the grocery list"); } }