如何使渲染列表显示来自用户输入的正确数据？

Question

I am creating a Budget app and I was able to get the user input to print out almost like a to-do app, but in this case, it's just the user's budget.

The issue I am having at the moment is that it's not printing out the user's input information. This is what I have done.

• Pushed render list into an array
• render list is taking information from an object I created and is meant to print the information from the object, but it prints are duplicates.

also for some reason it prints the syntax for the generated id syntax, which its not supposed to

 /*----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

I fixed the issue, it seems as though there was a duplicate in the HTML element and in the el object for the js side.

old HTML

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

new HTML

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

old el object

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

new el object

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