无法使用表单控件更新 JS 对象答案

【问题标题】：Cannot update JS Object using form controls无法使用表单控件更新 JS 对象
【发布时间】：2020-07-11 07:15:08
【问题描述】：

我希望能够更新我的 JavaScript 对象的属性（费用和收入），以便在我单击相应按钮时反映在 html 上。

我的 JS 方法如下：

add income - 添加在输入中找到的收入（id = amountAdded）
添加费用 - 添加在输入中找到的费用 (id = amountAdded)
返回一个有余额、收入和费用的对象
将值重置为 0 - 这是通过访问 JS 对象来完成的

但是，当我按下适当的按钮（添加收入、添加费用或重置）时，什么也没有发生。我在下面添加了代码笔链接。

账户余额Code Pen

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>

【问题讨论】：

标签： javascript html ecmascript-6

【解决方案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 更新 UI 并不好。如果你的项目太大了，以后就乱了

【讨论】：

谢谢！当我将来做我的项目时，我会把它放在脑海中。反正我只是为了练习。
有很多 JS 库可以方便更新 UI、angular、react、vue 等...

【解决方案2】：

您需要更新用于显示收入、余额和支出 p 标签的 p 标签的值。您可以通过向它们添加类名来做到这一点，当您单击添加收入或添加费用时，通过它们的类名获取元素并更新它们的值

【讨论】：