我在提取用户的输入并将其写入带有 HTML 和 JS 的页面时遇到问题。

Question

我对编程游戏比较陌生，刚刚开始我的第一个 JS 项目。我决定做一个非常基本的预算应用程序。我很难将用户输入写入页面。我认为它与输入本身或我如何调用传入输入变量有关，因为当我切换事件侦听器来执行此操作时，我无法将其记录到控制台。我将在下面发布与这个问题相关的代码部分。如果您能提供任何帮助，我将不胜感激。谢谢！

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

我测试了您的代码并做了一些调整：let incomingInput = document.querySelector("#incomingCashInput");let expenseInputName = document.querySelector("#expenseName");let expenseInputAmount = document.querySelector("#expenseAmount");let incomingCalcButton = document.querySelector("#incomingCalcButton");function incomingCash(input) {&nbsp; &nbsp; document.getElementById("budgetIncoming").innerHTML = input.value;}incomingCalcButton.addEventListener("click", function(){&nbsp; &nbsp; incomingCash(incomingInput);});因此，对于 querySelector，我添加了 ID 来选择元素。我还为事件侦听器添加了comingCalcButton，并将元素的值添加到innerHTML 而不是整个元素。那应该有效:)