我在使用 HTML 和 JS 提取用户输入并将其写入页面时遇到问题。 你能指出我在这里做错了什么吗？

Question

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 1

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 :)