Este programa es para agregar y eliminar elementos de una matriz. Anteriormente lo hizo hasta que traté de agregar la verificación de errores. Actualmente ninguno de los botones funciona correctamente.
El botón Agregar es para comprobar si hay entradas duplicadas. Si una entrada es un duplicado, debería mostrarse una alerta. Esto actualmente sigue mostrando la alerta "Entrada duplicada".
El botón Eliminar sirve para verificar primero si la entrada está en la lista si no muestra la alerta. Si la entrada está en la lista, solicite al usuario que confirme la eliminación del registro. Esto actualmente sigue mostrando la alerta "Artículo no en la lista".
Por último, si es posible, ¿cómo hago que cada elemento de la matriz aparezca en una nueva línea?
Código:
var groceryList = []; var groceryitem = document.getElementById('Text1').value; var description = document.getElementById("groceryinfo"); function Add() { if (groceryitem != groceryList.includes(groceryitem)) { groceryList.push(groceryitem); description.innerText = groceryList.toString(); } else { alert("Duplicate Entry"); } } function Remove() { if (groceryList.includes(groceryitem)) { if (confirm("Do you want to delete item")) { for (var i = 0; i <= groceryList.length; i++) { if (groceryList[i] == groceryitem) { groceryList.splice(i, 1); } description.innerText = groceryList.toString(); } } else { description.innerText = groceryList.toString(); } } else { alert("Item not in list"); description.innerText = groceryList.toString(); } } 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()"/>Se corrigieron algunos problemas aquí y allá. Algunas notas:
Debe leer qué artículo de groceryitem es cada vez que llama a Add() o Remove() , de lo contrario, si lo lee la primera vez, será "" y nunca se actualizará nuevamente.
Para mostrar los artículos, no puede hacer groceryList.toString() sino groceryList.join(",") .
Si desea que estén en más líneas, puede usar description.innerHTML = groceryList.join("<br/>");
No hay necesidad de comparar su artículo con la lista en groceryitem != groceryList.includes(groceryitem) . Todo lo que necesita saber es si !groceryList.includes(groceryitem) su artículo no está en la lista.
var groceryList = []; var description; description = document.getElementById("groceryinfo"); function Add() { var groceryitem = document.getElementById('Text1').value; if (!groceryList.includes(groceryitem)) { groceryList.push(groceryitem); document.getElementById('Text1').value = ""; description.innerHTML = groceryList.join("<br/>"); } else alert("Duplicate Entry"); } function Remove() { var groceryitem = document.getElementById('Text1').value; if (groceryList.includes(groceryitem)) { if (confirm("Do you want to delete item")) { for (var i = 0; i <= groceryList.length; i++) { if (groceryList[i] == groceryitem) groceryList.splice(i, 1); description.innerText = groceryList.toString(); } } else description.innerText = groceryList.toString(); } else { alert("Item not in list"); description.innerText = groceryList.toString(); } } <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()" />tienes algunos problemas en tu código, por ejemplo:
está obteniendo solo la primera vez el artículo de groceryitem , debe estar dentro del alcance de las funciones para obtener el valor cada vez que ejecuta su función. Lo mismo se aplica para la eliminación.
está haciendo una mala comparación en groceryitem != groceryList.includes(groceryitem) , principalmente porque includes devuelve un valor booleano y lo está comparando con una cadena/indefinido.
la función de eliminación es buena, pero se puede mejorar usando un filter como este:
if (confirm("Do you want to delete item")) { groceryList = groceryList.filter(gi => gi !== groceryitem); description.innerText = groceryList.toString(); }a continuación, puede encontrar un fragmento con su código en pleno funcionamiento.
var groceryList = []; var groceryitem; var description; description = document.getElementById("groceryinfo"); function Add() { groceryitem = document.getElementById('Text1').value; if (!groceryList.includes(groceryitem)) { groceryList.push(groceryitem); description.innerText = groceryList.toString(); } else alert("Duplicate Entry"); } function Remove() { groceryitem = document.getElementById('Text1').value; if (groceryList.includes(groceryitem)) { if (confirm("Do you want to delete item")) { groceryList = groceryList.filter(gi => gi !== groceryitem); description.innerText = groceryList.toString(); } } else { alert("Item not in list"); description.innerText = groceryList.toString(); } } <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> </script>