Блог

Главная - Вопросы по программированию - Как принимать пользовательский ввод в JS и присваивать локальному объекту, передавать в глобальный, а затем печатать в разделе HTML

Как принимать пользовательский ввод в JS и присваивать локальному объекту, передавать в глобальный, а затем печатать в разделе HTML

#javascript #html

#javascript #HTML

Вопрос:

Я работаю над своим первым приложением JS, и у меня возникают проблемы с получением пользовательского ввода, добавлением его к локальному объекту внутри функции, вводом его в глобальную функцию при событии click и печатью в разделе HTML. Я получаю undefined в моем console.log. Я предполагаю, что это как-то связано с исходным массивом локальных объектов, извлекающим значения пользовательского ввода в качестве значений объекта, но я не уверен, что я делаю неправильно. Любая помощь будет оценена.

 let expensesNew = [];

const addExpense = (ev) => {
  let expense = [{
    name: document.querySelector("[name=expense_Name]").value,
    amount: document.querySelector("[name=expense_Value]").value
  }]
  expensesNew.push(expense);
  for (let i = 0; i < expense.length; i  ) {
    console.log(expensesNew.name);
    console.log(expensesNew.amount);
  }
  console.warn('added', {
    expensesNew
  });

  document.querySelector('#title_Expenses').innerHTML = expensesNew[i].name;
  document.querySelector('#value_Expenses').innerHTML = expensesNew[i].amount;
  let message = `You've just added ${expensesNew.name} for ${expensesNew.amount}.`;
  console.log(message);
} 
 <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>
    <div class="expContainer">
      <h4>Edit</h4>
      <section class="deleteExpenses">

      </section>
    </div>

  </section>


</body>

Комментарии:

1. На данный момент ничто в вашем примере не вызывает addExpense функцию. Если возможно, пожалуйста, убедитесь, что код в вопросе воспроизводит проблему.

2. Вы получаете undefined , потому что у вас нет доступа к индексу expensesNew в вашем цикле, и вы также вкладываете все новые расходы в их собственный массив. Вам нужно будет позвонить console.log(expensesNew[i][0].name); .

3. @DBS моя ошибка, я забыл поместить это туда. « пусть outgoingCalcButton = document.getElementById(‘expenseButton’); expenseButton.addEventListener(«click», addExpense); «

4. @pilchard Я подумал, что проще всего вложить их в объект и перенести их в основной глобальный объект (поскольку мне нужно будет использовать этот объект при расчетах бюджета позже в другой функции) для записи в мой HTML. Разве это не так?

Метки: , ,