我在提取用户的输入并将其写入带有 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) {

    document.getElementById("budgetIncoming").innerHTML = input.value;

}

incomingCalcButton.addEventListener("click", function(){

    incomingCash(incomingInput);

});

因此，对于 querySelector，我添加了 ID 来选择元素。我还为事件侦听器添加了comingCalcButton，并将元素的值添加到innerHTML 而不是整个元素。

那应该有效:)