Taking user input in a local variable and pushing to a global object array

JavaScript
1

Hey there!

I am working on my first JS project. It is a simple budget app with 3 user inputs to take incoming cash flow, expense name, and expense amount. I am trying to take the expense name and amount from that user input and push it into a global expense object array and have that object printed in the HTML. I keep getting undefined when I console log both of those but am not sure what I am doing wrong to pull the input. It seems to work when I pull it and don’t push directly into an array. When I just print straight from the input to the sections they’re going to it works fine, so I don’t know if I am messing up with the global array or what.

Any help would be greatly appreciated. Thanks so much!

let expensesNew = [];

const addExpense = (ev) => {
    let expense =[{
        name: document.querySelector("[name=expense_Name]").value,
        amount: document.querySelector("[name=expense_Value]").value
    }]
    expensesNew.push(expense[name]);
    
    for (let i = 0; i < expensesNew.length; i++){
        console.log(expensesNew[0]);
        console.log(expense.name);
        console.log(expense.amount);
        document.querySelector('#title_Expenses').innerHTML = expensesNew.name;
        document.querySelector('#value_Expenses').innerHTML = expensesNew[amount];
        let message = `You've just added ${expensesNew[name]} for .`;
        console.log(message);
    }
    console.warn('added', {expensesNew});
}

<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 id="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>
3

@RandellDawson Whoops here is that addition.

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

@camperextraordinaire

Thanks for the feedback so far. At this point with the loop and such, I have kind of just been trying things to see if they will work. I think my mistake with a lot of what you said is my misunderstanding of objects. I tried sending expense itself as the object with the properties of name and amount but wasn’t getting anything besides undefined. Since that wasn’t working I thought it might work pushing specifically the name property in expense. Like I said, at this point, I have been stumped for days, so have just been trying things to see if they work and I have any output besides undefined.

My original plan was to create a new object (expense) with each click event and push that to a global array. I realize that I am doing this object incorrectly, so how should I be declaring the object expense differently if this isn’t doing it correctly?

let expense =[{
        name: document.querySelector("[name=expense_Name]").value,
        amount: document.querySelector("[name=expense_Value]").value
    }]