javascript - 获取新值输入 .innerHTML

Question

我在理解如何从我的 span id='savings' 中获取新值时遇到一些问题。如您所见，我需要让我的银行账户正常运作。如果存款还好，但是当我想取钱时，它从我的起点0开始，而不是从我存入的开始。

var inputAmount = document.getElementById('inputAmount');
var withdBtn = document.getElementById('withdBtn');
var savingSpan = document.querySelector('#savings');
var myBalance = Number(savingSpan.innerHTML);
var depBtn = document.getElementById('depBtn');

depBtn.addEventListener('click', function() {
  var savAmount = Number(inputAmount.value);
  var depositBalance = savAmount + myBalance;
  savingSpan.innerHTML = depositBalance;
});

withdBtn.addEventListener('click', function() {
  var savAmount = Number(inputAmount.value);
  var withdrawBalance = (myBalance.innerHTML) - savAmount;
  savingSpan.innerHTML = withdrawBalance;

});

<h1></h1>

<div class="savings" id="accounts">

  <h2>Savings Account</h2>

  <h3> Your current balance is </h3>
  <span>$</span>  <span id="savings">  00.00 </span>

  <p>
    <input id="inputAmount" type="number" placeholder="Enter amount here">
  </p>

  <p>
    <button id="withdBtn" type="button">Withdraw</button>
    <button id="depBtn" type="button">Deposit</button>
  </p>

</div>

Answer 1

你的代码有两个错误:

1. 您正在调用 myBalance.innerHTML，但它应该只是 myBalance，因为该变量已经保存了值。
2. 您需要在单击按钮时更新 myBalance 变量。目前

简单的解决方案:只需将 depositBalance 和 withdrawBalance 替换为 myBalance。

depBtn.addEventListener('click', function() {
    var savAmount = Number(inputAmount.value);
    myBalance = savAmount + myBalance;
    savingSpan.innerHTML = myBalance; 
});


withdBtn.addEventListener('click', function(){
    var savAmount = Number(inputAmount.value);
    myBalance = myBalance - savAmount;

   savingSpan.innerHTML = myBalance;
});

另见 https://jsfiddle.net/enpo/wdu87Lek/ .