This program is to add and removing items from an array. It previously did until I tried to add error checking. Currently neither button works correctly.
The Add Button is to check for duplicate entries. If an entry is a duplicate an alert should display. This currently keeps displaying the alert "Duplicate Entry".
The Remove Button is to first check to see if the entry is in the list if not display the alert. If entry is in the list ask the user to confirm deletion of the record. This currently keeps displaying the alert "Item not in list".
Lastly, if possible how do I make every item in the array appear on a new line?
Code:
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()"/>Fixed some issues here and there. Some notes:
You need to read what groceryitem is everytime you call Add() or Remove(), otherwise if you read it the first time it will be "" and never updated again.
To display the items, you can't do groceryList.toString() but groceryList.join(",").
If you want them to be on more lines, you can use description.innerHTML = groceryList.join("<br/>");
There's no need to compare your item with the list on groceryitem != groceryList.includes(groceryitem). All you need to know is if !groceryList.includes(groceryitem) your item is not in the list.
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()" />you have some problems in your code, for example:
you are getting only the first time the groceryitem, it should be inside the scope of the funtions in order to get the value each time that you run your function. same applies for removal.
you are doing a bad comparison in groceryitem != groceryList.includes(groceryitem), mostly because includes returns a boolean and you are comparing it to an string/undefined.
the removal function is good, but it can be improved using filter
like this:
if (confirm("Do you want to delete item")) {
groceryList = groceryList.filter(gi => gi !== groceryitem);
description.innerText = groceryList.toString();
}
below you can find a snipet with your code fully working.
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>