Невозможно обновить JS объект с помощью элементов управления формы

Question

Я хочу иметь возможность обновлять свойства моего объекта JavaScript (расходы и доход), чтобы они отражались на html, когда я нажимаю соответствующую кнопку.

Мои JS методы работает следующим образом:

1. добавить доход - который добавляет доход, найденный во вводе (id = amountAdded)
2. add расход - который добавляет расход, найденный во вводе (id = amountAdded)
3. вернуть объект с балансом, доходом и расходом
4. сбросить значения до 0 - это делается путем доступа к объекту JS

Однако, когда я нажимаю соответствующая кнопка - добавить доход, добавить расход или сбросить - ничего не происходит. Я добавил ссылку на кодовое перо ниже.

Баланс на счете Кодовое перо

let myAccount = {
        name: 'John Doe',
        income: 0,
        expense: 0
    }
    
    let addIncome = function(){
        amount = document.getElementById("amountAdded").value
        myAccount.income+=amount
    }
    
    let addExpense = function(){
        amount = document.getElementById("amountAdded").value
        myAccount.expense+=amount
    }
    
    let resetAccount = function(){
        myAccount.income=0
        myAccount.expense=0
    }
    
    let getAccountSummary = function(){
        //for ui logic 
        return { 
            balance: myAccount.income-myAccount.expense,
            income: myAccount.income,
            expense:myAccount.expense
        }
    }
    
    let printAccountSummary = function(account){
        //for developer
        let accountSummary = getAccountSummary(account)
        console.log(`
            Balance: ${accountSummary.balance}
            Income: ${accountSummary.income}
            Expense: ${accountSummary.expense}
        `)
    }
    
    // addExpense(account,100)
    // addIncome(account,200)
    // printAccountSummary(account)
    
    
    //find app
    var app = document.getElementById("root")
    
    //make elements
    var h1 = document.createElement("h1")
    var text = document.createTextNode(`${myAccount.name}`)
    
var balance = document.createElement("p")
var balanceText = document.createTextNode(`Balance    $${getAccountSummary(myAccount).balance}`)
    var expense = document.createElement("p")
    var expenseText = document.createTextNode(`Income $${getAccountSummary(myAccount).expense}`)
    var income = document.createElement("p")
    var incomeText = document.createTextNode(`Expense $${getAccountSummary(myAccount).income}`)
    //assign elements
    
    h1.appendChild(text)
    balance.appendChild(balanceText)
    income.appendChild(incomeText)
    expense.appendChild(expenseText)
    //append children
    app.appendChild(h1)
    app.appendChild(balance)
    app.appendChild(income)
    app.appendChild(expense)

  <div class="container">
    <!--   Use JavaScript to Populate Card -->
      <div id="root" class="card">
      </div>
    <!--   Set Form Control to Add new Amounts -->
      <div class="update">
          <form>  
            <div class="input-group">
              <input class="form-control" type="text" name="amountAdded" id="amountAdded" placeholder="Enter Amount"/>
              <input type="button" class="btn btn-outline-secondary" value="Add Income" onclick="addIncome()"/>
              <input type="button" class="btn btn-outline-secondary" value="Add Expense" onclick="addExpense()"/>
              <input type="button" value="Reset" class="btn btn-outline-secondary" onclick="resetAccount()"/>
            </div>
          </form>
      </div> 
    </div>

Answer 1

Просто нужно обновить UI. Попробуйте это.

let myAccount = {
    name: 'John Doe',
    income: 0,
    expense: 0
}

let addIncome = function(){
   console.log('add income');
    amount = document.getElementById("amountAdded").value
    myAccount.income+=amount
    updateUI()
}

let addExpense = function(){
    amount = document.getElementById("amountAdded").value
    myAccount.expense+=amount
}

let resetAccount = function(){
    myAccount.income=0
    myAccount.expense=0
}

let getAccountSummary = function(){
    //for ui logic 
    return { 
        balance: myAccount.income-myAccount.expense,
        income: myAccount.income,
        expense:myAccount.expense
    }
}

let printAccountSummary = function(account){
    //for developer
    let accountSummary = getAccountSummary(account)
    console.log(`
        Balance: ${accountSummary.balance}
        Income: ${accountSummary.income}
        Expense: ${accountSummary.expense}
    `)
}

// addExpense(account,100)
// addIncome(account,200)
// printAccountSummary(account)

let updateUI = function() {
  //find app
  var app = document.getElementById("root")
  app.innerHTML = '';
  //make elements
  var h1 = document.createElement("h1")
  var text = document.createTextNode(`${myAccount.name}`)

  var balance = document.createElement("p")
  var balanceText = document.createTextNode(`Balance $${getAccountSummary(myAccount).balance}`)
  var expense = document.createElement("p")
  var expenseText = document.createTextNode(`Income $${getAccountSummary(myAccount).expense}`)
  var income = document.createElement("p")
  var incomeText = document.createTextNode(`Expense $${getAccountSummary(myAccount).income}`)
  //assign elements

  h1.appendChild(text)
  balance.appendChild(balanceText)
  income.appendChild(incomeText)
  expense.appendChild(expenseText)
  //append children
  app.appendChild(h1)
  app.appendChild(balance)
  app.appendChild(income)
  app.appendChild(expense)  
}
updateUI()

Также обратите внимание, что обновление пользовательского интерфейса напрямую с помощью JavaScript нехорошо. Если ваш проект слишком велик, в будущем будет хаос

Answer 2

вам необходимо обновить значения для тегов p, которые вы используете для отображения тегов p дохода, баланса и расхода. Вы можете сделать это, добавив к ним имя класса, и когда вы нажмете «Добавить доход» или «Добавить расход», получите элементы по их имени класса и обновите их значения