I am having a problem pulling the user’s input and writing it into a page with HTML and JS. Are you able to point out what I am doing wrong here?

Good morning!

I am relatively new to the programming game and have just started on my first JS project. I have decided to do a pretty basic budget app. I am having a hard time writing the user input to the page. I assume it has something to do with the input itself or how I call the incomingInput var, because I am unable to log it to the console when I switch the Event Listener around to do that. I will post the portion of the code that is relevant to this question below. I would appreciate any help you can give. Thanks!

let incomingInput = document.querySelector("incoming_Cash_Input");
let expenseInputName = document.querySelector("expense_Name");
let expenseInputAmount = document.querySelector("expense_Value");

function incomingCash() {
    document.getElementById("budgetIncoming").innerHTML = incomingInput;
    console.log("hello"); 
}

incomingCalcButton.addEventListener("click", incomingCash())

<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="number" 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 class="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>

Answer

I’ve tested your code and made a few adjustments:

let incomingInput = document.querySelector("#incomingCashInput");
let expenseInputName = document.querySelector("#expenseName");
let expenseInputAmount = document.querySelector("#expenseAmount");

let incomingCalcButton = document.querySelector("#incomingCalcButton");

function incomingCash(input) {
    document.getElementById("budgetIncoming").innerHTML = input.value;
}

incomingCalcButton.addEventListener("click", function(){
    incomingCash(incomingInput);
});

So for the querySelector I’ve added the ID’s to select the elements. I’ve also added the incomingCalcButton for the eventlistener and added the value of the elements to the innerHTML instead of the entire elements.

That should work 🙂