Super newbie here. I need to create a grocery list that adds an item to a list, removes the first item of the list, or the last item of the list, and displays these results in an array at the bottom. The problem is that I can't get the added items to display so I can't test and see if the pop and shift commands are working as they should.
Here's what I have at the moment
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>I think part of the issue might be that you are setting multiple element IDs to the same thing. For example, you have a span; text input; and button input all set to the ID: "listAdd". The ID is how the document tree uniquely identifies the HTML element, so they have to be different.
As a guess, what you want is for the "listAdd" function to run when you click the relevant button. So, you could do something like...
<input type="button" id="listAddBtn" value="Add to List"><br>
and then run your code to add the event listener...
document.getElementById("listAddBtn").addEventListener("click", listAdd);
but really, I find it simpler to just write the HTML with the event listener already attached...
<input type="button" id="listAddBtn" value="Add to List" onclick="listAdd();"><br>
And you would have to update those IDs to be unique for everything. As a related note, the "name" attribute of the form element is what the server side code uses to identify the value that is passed along, so I would change your text inputs to have the name attribute...
<input type="text" id="listAddVal" name="listAddVal" value=""><br>
I hope all that is useful.
Edit... Re-reading your post to be sure I was responding correctly and seeing Andreas's quick responses, I'll reiterate what he mentioned: The display function just loops through your list. You need to add code inside the for-loop that builds the HTML you want to display and then set the innerHTML property of your display container element. Something like...
//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;
}
And as I was writing that, I noticed that your helper methods for editing the groceries array doesn't seem to actually add anything to the arrays. You'd need to get the value you're trying to push (for example) from the form element, and then pass that as the parameter to the push function...
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");
}
}