Блог

Я делаю это для практики. Я хочу сделать небольшое приложение, которое отслеживает ваши расходы. Он содержит два текстовых ввода и один ввод даты, кроме одной кнопки для добавления значения каждого из них на экране. Вы пишете место, где потратили деньги, дату и их сумму, и они отображаются ниже в виде неупорядоченного списка плюс кнопка для удаления всей записи.

Как у меня может быть неупорядоченный список, содержащий три элемента li? Я пробовал создавать несколько списков и добавлять их в список или друг к другу. В какой-то степени это сработало, однако кнопка «Удалить» удалила только последнюю введенную запись-сумму. Если бы я добавил его в список, он удалил бы весь элемент ul, так что это можно было сделать только один раз при попытке.

Мой код прямо сейчас, когда я вернулся к тому, с чего начал:

HTML

 lt;div class=""gt; lt;input type="text" placeholder="Where was the expense made?" class="place"gt; lt;input type="date" class="date"gt; lt;input type="text" class="amount"gt; lt;input type="button" value="Add Expense" class="addBtn"gt; lt;/divgt; lt;ul class="list"gt;lt;/ulgt;  

JS

 function addStuff() {  const place = placeInput.value; const date = dateInput.value; const amount = amountInput.value;  const btn = document.createElement('button'); btn.type = 'button'; btn.textContent = 'X'; btn.addEventListener("click", (e) =gt; deleteExpense(e));  const li = document.createElement('li'); li.textContent = `${place}`; li.appendChild(btn);  list.appendChild(li);  }