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

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

我的JS方法的工作原理如下：

添加收入-添加输入中的收入（id=AMOUNTADED）

添加费用-添加在输入中找到的费用（id=AMOUNTADED）

返回具有余额、收入和费用的对象

将值重置为0-这是通过访问JS对象完成的

然而，当我按下适当的按钮——添加收入、添加费用或重置——什么都没有发生。我在下面添加了代码笔链接

帐户余额

让我的帐户={
姓名：“约翰·多伊”，
收入：0，
费用：0
}
设addIncome=function（）{
金额=document.getElementById（“amountAdded”）.value
我的帐户。收入+=金额
}
设addExpense=function（）{
金额=document.getElementById（“amountAdded”）.value
myAccount.费用+=金额
}
让resetAccount=function（）{
我的帐户。收入=0
myAccount.expense=0
}
让getAccountSummary=函数（）{
//用于用户界面逻辑
返回{
余额：myAccount.income-myAccount.expense，
收入：myAccount.income，
费用：myAccount.expense
}
}
让printAccountSummary=函数（帐户）{
//开发商
让accountSummary=getAccountSummary（帐户）
console.log(`
余额：${accountSummary.Balance}
收入：${accountSummary.Income}
费用：${accountSummary.Expense}
`)
}
//附加费用（账户，100）
//addIncome（账户，200）
//打印帐户摘要（帐户）
//查找应用程序
var app=document.getElementById（“根”）
//制造元素
var h1=document.createElement（“h1”）
var text=document.createTextNode（`${myAccount.name}`）
var余额=document.createElement（“p”）
var balanceText=document.createTextNode（`Balance$${getAccountSummary（myAccount.Balance}`）
var费用=document.createElement（“p”）
var expenseText=document.createTextNode（`Income$${getAccountSummary（myAccount.expense}`）
var收入=document.createElement（“p”）
var incomeText=document.createTextNode（`Expense$${getAccountSummary（myAccount.income}`）
//分配元素
h1.追加子项（文本）
balance.appendChild（balanceText）
收入。子女（incomeText）
expense.appendChild（expenseText）
//附加子项
app.appendChild（h1）
app.appendChild（余额）
附件.儿童（收入）
app.appendChild（费用）

---

只需更新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并不好。如果你的项目太大，将来会很混乱

你需要更新你用来显示收入、余额和支出p标签的p标签的值。您可以通过向元素添加一个类名来实现这一点，当您单击“添加收入”或“添加费用”时，可以按元素的类名获取元素并更新其值

谢谢！当我将来做我的项目时，我会把这一点放在脑后。不管怎样，我只是在练习。有很多JS库可以帮助更新UI、angular、react、vue等。。。