I’m currently making a website with a “shopping list” functionality. I can create an array and add items to the “shopping list” via the input field, and I can also remove the latest input using a button.
As of now, the list shows all new items in order of input. But, when I remove the latest item, it shows only that item. And then when I add a new item, the full, updated list shows.
These pictures show how it currently looks:
- Add items, that show up in the list ยจ
- Remove item – the list disappears and only the latest item being removed is shown
- The new, updated list shows ONLY after I’ve added a new item to the list (“four”)
What I’m trying to do is this:
- Add items – they show up in the list, as now
- Remove item – the latest item is just removed from the list, but the list still shows previous items remaining. The picture here is how I want it to look.
var arrayOfWord = [];
var inputElement = document.getElementById('userinput');
var errorElement = document.getElementById('error');
var wordsElement = document.getElementById('words');
function addWord() {
errorElement.innerHTML = "";
var word = inputElement.value;
if (word.trim() === "")
errorElement.innerHTML = "Empty input, write an item you want to put on the list!";
else
arrayOfWord.push(word);
inputElement.value = "";
process();
}
function process() {
words.innerHTML = arrayOfWord.join(' <br><br> ');
}
function remove() {
words.innerHTML = arrayOfWord.pop();
document.getElementById('words').innerHTML = parsed;
}
<p>
<ol id="demo"></ol>
</p>
<input id="userinput" /><button onclick="addWord()">Add item</button>
<div id="error"></div>
<button onclick="remove()">Remove</button><br>
<p id="testing"></p>
<p id="words"></p><br>
<a href="#" class="action">Buy Now</a>
</div>