Я пытаюсь создать список отображаемых элементов, используя данные, введенные в текстовое поле. Моя проблема в том, что когда я хочу добавить второй элемент списка, первый просто обновляется. Я пробовал несколько разных вещей, и я застрял.
function addToList() {
let food = document.getElementById("food").value;
let amount = document.getElementById("amount").value;
let unit = document.getElementById("unit").value;
document.getElementById("foodlist").innerHTML =
(food + ' ' + amount + ' ' + unit + '.')
};
<input type="text" name="" value="food" id="food"><br>
<input type="text" name="" value="amount" id="amount"><br>
<select id="unit">
<option value="oz">ounces</option>
<option value="lb">pounds</option>
<option value="servings">servings</option>
</select><br>
<button onclick="addToList()" type="button" name="button" id="addButton">add</button><br>
<li id="foodlist"></li>
Я хочу, чтобы данные из текстовых полей создавали новый элемент списка и добавляли данные в объект при каждом нажатии кнопки. все, что я получил до сих пор, это элемент списка, который постоянно обновляется.