Estoy tratando de hacer un programa simple de lista de compras. Hay un botón para agregar elementos y un botón para eliminar elementos. También hay un cuadro de texto. Por ejemplo, cuando escribe 'manzanas' en el campo de texto y presiona el botón Agregar. El botón Agregar debe poner 'manzanas' en la matriz de lista de comestibles y luego mostrar manzanas en el área div etiquetada como información de comestibles.
El botón Eliminar tampoco funcionará. Por ejemplo, si tiene cinco elementos diferentes en la lista si el valor ingresado en el campo de texto es 'manzanas'. Las manzanas deben ser encontradas y luego eliminadas. La matriz de la lista de comestibles debería volver a mostrarse y mostrar que la matriz contiene sin el elemento eliminado.
<body> My grocery list <br> <br> <div id="groceryinfo"></div> <br> <br> <input id="Button1" type="button" value="Add this item" onclick="Add()" /><input id="Text1" type="text" /> <br> <input id="Button2" type="button" value="Remove this item" onclick="Remove()" /> <script> var groceryList = []; var groceryitem; var description; description = document.getElementById("groceryinfo"); function Add() { groceryitem = document.getElementById('Text1').value; groceryList.push(groceryitem); groceryList = description; } function Remove() { for (var i = 0; i <= groceryList.length; i++) { if (groceryList[i] == groceryitem) groceryList.splice(i, 1); groceryList = description; } } </script>Puede lograr esto con document.getElementById("groceryinfo").innerHTML así:
<body> My grocery list <br> <br> <div id="groceryinfo"></div> <br> <br> <input id="Button1" type="button" value="Add this item" onclick="Add()" /><input id="Text1" type="text" /> <br> <input id="Button2" type="button" value="Remove this item" onclick="Remove()" /> <script> var groceryList = []; var groceryitem; var description; description = document.getElementById("groceryinfo"); function Add() { groceryitem = document.getElementById('Text1').value; groceryList.push(groceryitem); document.getElementById("groceryinfo").innerHTML = groceryList.toString(); } function Remove() { for (var i = 0; i <= groceryList.length; i++) { if (groceryList[i] === groceryitem) { groceryList.splice(i, 1); document.getElementById("groceryinfo").innerHTML = groceryList.toString(); } } } </script>