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

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>

Is this all your code? I do not see any button you have that executes your addExpense function.

@RandellDawson Whoops here is that addition.

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

Adding the code you posted above, I get the following error in the browser console:

Uncaught ReferenceError: amount is not defined

You have reference a variable named amount in the following line, but never defined such a variable.

document.querySelector('#value_Expenses').innerHTML = expensesNew[amount];

The next line will also cause you trouble, as there is no variable named name defined.

let message = `You've just added ${expensesNew[name]} for .`;

I notice you are using a for loop to iterate through expensesNew, but I do not see the point of a loop since you are just replacing the innerHTML of the two section elements. You will only “see” the last element in the expensesNew array as the others will be displayed too quickly to see. If you just want to see the last element, just reference the last element. Also, in the line below, I am not sure why you are only pushing expense.name instead of expense into the array. You attempt to reference the object and property names in your console.log statements inside the for loop, so you should push the entire object to be able to make those references later.

One last thing, you described in your first post that you wanted to create an array of objects (expensesNew), but you define expense as an array containing one object. Instead, expense should just be an object.

@RandellDawson

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
    }]