如何使渲染列表顯示來自用戶輸入的正確數據？

Question

我正在創建一個預算應用程序，我能夠讓用戶輸入幾乎像待辦事項應用程序一樣打印出來，但在這種情況下，它只是用戶的預算。

我目前遇到的問題是它沒有打印出用戶的輸入信息。 這就是我所做的。

• 將渲染列表推送到數組中
• 渲染列表從我創建的對象中獲取信息，旨在打印來自對象的信息，但它打印的是重復的。

也出於某種原因，它會打印生成的 id 語法的語法，這是不應該的

 /*----Generate ID----*/ const createId = () => `${Math.floor(Math.random() * 10000)}$(new Date().getTime())}`; /*----Variable Objects----*/ const el = { list: document.querySelector(".list"), cashflow: document.querySelector(".cashflow"), catagory: document.querySelector(".catagory"), label: document.querySelector(".label"), startDate: document.querySelector(".start-date"), endDate: document.querySelector(".end-date"), number: document.querySelector(".end-date"), }; /*----Array with local Storage----*/ let budgetArray = []; /*----Budget list Object----*/ function makeNewBudget() { const data = { id: createId(), cashflowNew: el.cashflow.value, catagoryNew: el.catagory.value, labelNew: el.label.value, startDateNew: el.startDate.value, endDateNew: el.endDate.value, numberNew: el.number.value, }; return data; } /*----Render Budget List----*/ function renderList() { el.list.innerHTML = budgetArray.map(function(data, i) { return `<div class="entry"> <div class="list"> <button onclick="deleteItem(event, ${i})" class = "Archive" data-id="${data.id}"> <img src="../resources/Images/archive.png" alt="Archvie"> </button> <button <button onclick="editItem(event, ${i})" class = "Archive" data-id="${data.id}"> class = "edit" data-id="${data.id}"> <img src="../resources/Images/edit.png" alt="Edit"> </button> <div class="input" data-id="${data.id}"></div> <label class="print date">${data.startDateNew} - ${data.endDateNew} <label class="print income">${data.cashflowNew} <label class="print cata">${data.catagoryNew} <label class="print reason">${data.labelNew} <label class="print amount">${data.numberNew} </div> </div>`; }); el.input.value = ""; } /*----form validation----*/ let budgetButton = document.querySelector(".budget-button"); let label = document.querySelector(".label"); let startDate = document.querySelector(".start-date"); let endDate = document.querySelector(".end-date"); let num = document.querySelector(".number"); budgetButton.addEventListener("click", () => { if (!label.value || !startDate.value || !endDate.value || !num.value) { alert("please make sure all inputs are filled"); } budgetArray.push(makeNewBudget()) renderList(); storedEntry(); }); /*----Store Stored budget list----*/ function storedEntry() { window.localStorage.setItem(STORAGE_KEY, budgetArray); }

 <div class="create-budget"> <form class="budget"> <input class="budget-button" type="button" value="Create your budget"> <select class="catagory cashflow" name="income/expense" class="income/expense"> <option class="options" value="income">Income</option> <option class="options" value="expense">Expense</option> </select> <select name="Catagory" class="catagory" value="Catagory"> <option class="options" value="House Hold">House Hold</option> <option class="options" value="Car">Car</option> <option class="options" value="entertainment">Entertainment</option> <option class="options" value="investments">Investments</option> <option class="options" value="business">Business</option> <option class="options" value="savings">Savings</option> </select> <input class="label" type="text" placeholder="Example rent"> <input class="start-date" type="date"> <input class="end-date" type="date"> <input class="number" type="text" placeholder="0,0"> </form> </div> <div class="new-budet"> <div class="title"> <h5>Date</h5> <h5>Income/Expenses</h5> <h5>Catagory</h5> <h5>Items</h5> <h5>Amount</h5> </div> </div> <div class="list"></div> <!--New Entry for user <div class="entry"> <div class="list"> <button class = "Archive"> <img src="../resources/Images/archive.png" alt="Archvie"> </button> <button class = "edit"> <img src="../resources/Images/edit.png" alt="Edit"> </button> <label class="input" data-id="id"> <label class="print">date <label class="print income">income <label class="print cata">catagory <label class="print reason">Reason <label class="print amount">amount </div> </div> --> <div class="total"></div>

Answer 1

我解決了這個問題，似乎 HTML 元素和 js 端的 el 對象中有重復項。

舊的 HTML

<select class="catagory cashflow" name="income/expense" class="income/expense">
<select name="Catagory" class="catagory" value="Catagory">

新的 HTML

<select id="cashflow" name="income/expense" class="income/expense">
<select name="Catagory" class="catagory" value="Catagory">

舊的 el 對象

const el = {
number: document.querySelector(".end-date"),
};

新的 el 對象

const el = {
number: document.querySelector(".number"),