HTML 输出中对象的属性值未更新答案

【问题标题】：Object's property's value in HTML output not being updatedHTML 输出中对象的属性值未更新
【发布时间】：2020-12-06 23:44:32
【问题描述】：

为什么我的对象在 HTML 输出中的属性值没有更新，而 console.log(account) 显示该属性实际上在调用函数时已更新？我正在使用香草 Javascript。在屏幕截图中，当我单击“继续交易”按钮时，我看到的蓝色下划线数字没有改变，这是为什么呢？我认为this.balance = this.balance + x; 会导致account.balance 属性发生变化，它确实发生了变化，但仅在控制台中，为什么document.getElementById("demo2").innerHTML = "Current Balance: " + formatMoney(account.balance); 即使在调用account.change(x) 函数之后仍显示$100.00（通过单击“继续交易按钮）？

截图：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Project1</title>
</head>
<body>
    <p>Project1</p>
    <br>
    <br>
    <p>Welcome to Best Bank.</p>
    <p id="demo1"></p>
    <p id="demo2"></p>
    <form>
        Deposit (+) or Withdraw (-) Amount: <input type="number" id="form_D/W"><br><br>
       
        <button type="button" onclick="account.change(document.getElementById('form_D/W').value*1)">Proceed with Transaction</button>
      </form>
    <p id="demo3"></p>
    
    <script>

        let account = {
            account_number: "1111",
            balance: 100,
            
            change: function (x){
                
                this.balance = this.balance + x;
                console.log("Balance changed.\nPrevious Balance: " + (this.balance - x) + ".\nChanged by " + x + ".\n" + this.balance + " is the current balance.");
                document.getElementById("demo3").innerHTML = "Balance changed.<br>Previous Amount: " + formatMoney((this.balance - x)) + ".<br>Changed by " + formatMoney(x) + ".<br>" + formatMoney(this.balance) + " is the current balance."
                
            }
         
        }   
        function formatMoney(number) {
        return number.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
        }
        
        
        document.getElementById("demo1").innerHTML = "Account Number: " + account.account_number;
        document.getElementById("demo2").innerHTML = "Current Balance: " + formatMoney(account.balance);
        
        </script>

</body>
</html>

【问题讨论】：

您的更改方法没有更新demo2 元素

标签： javascript html

【解决方案1】：

你必须更新元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Project1</title>
</head>
<body>
    <p>Project1</p>
    <br>
    <br>
    <p>Welcome to Best Bank.</p>
    <p id="demo1"></p>
    <p id="demo2"></p>
    <form>
        Deposit (+) or Withdraw (-) Amount: <input type="number" id="form_D/W"><br><br>
       
        <button type="button" onclick="account.change(document.getElementById('form_D/W').value*1)">Proceed with Transaction</button>
      </form>
    <p id="demo3"></p>
    
    <script>

        let account = {
            account_number: "1111",
            balance: 100,
            
            change: function (x){
                
                this.balance = this.balance + x;
                console.log("Balance changed.\nPrevious Balance: " + (this.balance - x) + ".\nChanged by " + x + ".\n" + this.balance + " is the current balance.");
                document.getElementById("demo3").innerHTML = "Balance changed.<br>Previous Amount: " + formatMoney((this.balance - x)) + ".<br>Changed by " + formatMoney(x) + ".<br>" + formatMoney(this.balance) + " is the current balance."
                // Updating the element
                document.getElementById("demo2").innerHTML = "Current Balance: " + formatMoney(this.balance);
            }
         
        }   
        function formatMoney(number) {
        return number.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
        }
        
        
        document.getElementById("demo1").innerHTML = "Account Number: " + account.account_number;
        document.getElementById("demo2").innerHTML = "Current Balance: " + formatMoney(account.balance);
        
        </script>

</body>
</html>

【讨论】：