Javascript 从用户输入保存的JS对象打印每个费用名称和金额_Javascript_Html

Javascript 从用户输入保存的JS对象打印每个费用名称和金额

javascript html

Javascript 从用户输入保存的JS对象打印每个费用名称和金额,javascript,html,Javascript,Html,早上好我的第一个JS应用程序运行了一半，遇到了一个问题。我很难将多个用户输入打印到JS对象中，并将obj.name和obj.amount打印到各自的位置。我可以将单个项目打印到它们的区域，但每次都会将新项目放入其中，而不是将新输入添加到旧项目中。我尝试过不同的方法，比如将输入直接放入数组obj，然后使用for循环，将两个输入放入一个单独的var，并将其推入先前创建的数组。我甚至尝试了console.log来查看它从输入中得到了什么，它只记录字符串的第一个字母。如果能帮我把这件事做好，我将不胜感

早上好

我的第一个JS应用程序运行了一半，遇到了一个问题。我很难将多个用户输入打印到JS对象中，并将obj.name和obj.amount打印到各自的位置。我可以将单个项目打印到它们的区域，但每次都会将新项目放入其中，而不是将新输入添加到旧项目中。我尝试过不同的方法，比如将输入直接放入数组obj，然后使用for循环，将两个输入放入一个单独的var，并将其推入先前创建的数组。我甚至尝试了console.log来查看它从输入中得到了什么，它只记录字符串的第一个字母。如果能帮我把这件事做好，我将不胜感激。谢谢

这是我到目前为止所拥有的

let expenseNames = [];
function incomingExpenses() {
        expenseNames.name = document.querySelector("[name=expense_Name]").value,
        expenseNames.amount= document.querySelector("[name=expense_Value]").value
    
    for (var i = 0; i <expenseNames['amount'].length; i++){
    document.querySelector('#title_Expenses').innerHTML = expenseNames.name;
    document.querySelector('#value_Expenses').innerHTML = expenseNames.amount;
    console.log(expenseNames['name'][i]);
    i++;
    }
};

let outgoingCalcButton = document.getElementById('expenseButton');
expenseButton.addEventListener("click", incomingExpenses);

让expenseNames=[]；
职能收入费用（）{
expenseNames.name=document.querySelector（“[name=expense\u name]”）。值，
expenseNames.amount=document.querySelector（“[name=expense\u Value]”）。Value
对于（var i=0；i我不确定我是否很了解您想要实现的目标。
但也许这个例子可以帮助您推进项目：
这确实有帮助，我也一直在做计算部分的工作。现在对于我上面的问题，我正在尝试将我的费用名称和值写入页面。例如，如果用户输入Power 150、Mortgage 900和Car Pmt 200，我希望它显示所有这些内容，而不是现在它在哪里替换用户输入ea谢谢你到目前为止的帮助！
<body>
    <h1>Budget Application</h1>
    <div id="inputSections" class="inputSections">
        <section id="incomingMoney">
            <h3>Please Enter Your Budget</h3>
            <input type="number" id="incomingCashInput" class="inputs" name="incoming_Cash_Input"><br>
            <button id="incomingCalcButton">Calculate</button>
        </section>

        <section id="enterExpenses">
            <h3>Please Enter Your Expense</h3>
            <input type="text" id="expenseName" class="inputs" name="expense_Name">
            <h3>Please Enter Expense Amount</h3>
            <input type="number" id="expenseAmount" class="inputs" name="expense_Value"><br>
            <button id="expenseButton">Add Expense</button>
        </section>
    </div>
    <section id="calculations" class="calcs">
        <div class="budget calcs">
            <h3>Budget</h3><br>
            <img src="money_icon.png" class="moneyIcon calcIcon"><br>
            <section id="budgetIncoming">

            </section>
        </div>
        <div class="expenses calcs">
            <h3>Expenses</h3><br>
            <img src="expense_icon.png" class="expenseIcon calcIcon"><br>
            <section id="expenseIncoming">

            </section>
        </div>
        <div class="balance calcs">
            <h3>Balance</h3><br><br>
            <img src="budget_icon.png" class="budgetIcon calcIcon"><br>
            <section class="balanceIncoming">

            </section>
        </div>
    </section>

    <section id="expenses expContainer" >
        <div class="expContainer">
            <h4>Expense Title</h4>
            <section class="titleExpenses expContainer" id="title_Expenses">

            </section>
        </div>
        <div class="expContainer">
            <h4>Expense Value</h4><br><br>
            <section class="valueExpenses" id="value_Expenses">
                
            </section>
        </div>
        <div class="expContainer">
            <h4>Edit</h4>
            <section class="deleteExpenses" >

            </section>
        </div>

    </section>
</body>