Question

<div id="checking" class="account">
    <h2>Checking</h2>
    <div id= "checkingBalance" class="balance">$0</div>
    <input id="checkingInput" class="input" type="text" placeholder="enter an amount" />
    <input id="checkingDeposit" class="deposit" type="button" value="Deposit" />
    <input id="checkingWithdraw" class="withdraw" type="button" value="Withdraw" />
</div>

<div id="savings" class="account">
    <h2>Savings</h2>
    <div id="savingsBalance" class="balance">$0</div>
    <input id="savingsInput" class="input" type="text" placeholder="enter an amount" />
    <input id="savingsDeposit" class="deposit" type="button" value="Deposit" />
    <input id="savingsWithdraw" class="withdraw" type="button" value="Withdraw" />
</div>

<script 

    $(document).ready(function(){
        $("#checkingBalance").on("click", function() {
            var checkingBalance = 
            parseInt($("#checkingBalance").html()).replace("$","")
            console.log("This is the checking balance. " + typeof checkingBalance)

            var deposit = parseInt($("checkingAmount")).val()
            console.log("This is the deposit: "+ deposit)

            var total = deposit + checkingBalance
            console.log("This is the total: " + total)

            $("#checkingBalance").html("$" + total)

            if (total > 0) {
                $("body").removeClass("zero")
            }
        })
    });

在底部是我尝试检索值并从存款箱和取款框中更改。底部的JS是我的尝试，但似乎它不是我想要的解决方案。

Answer 1

在html id之前，#checkingAmount的{{1}} javascript中没有任何元素，#也没有checkingAmount。

将#checkingInput替换为checkingAmount。在value将#checkingInput元素的"0"属性设置为html以避免NaN。

＆＃13;

<!DOCTYPE html>
<html>

  <head>
    <script  src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  </head>

  <body>
    <div id="checking" class="account">
      <h2>Checking</h2>
      <div id="checkingBalance" class="balance">$0</div>
      <input id="checkingInput" class="input" type="text" value="0" placeholder="enter an amount" />
      <input id="checkingDeposit" class="deposit" type="button" value="Deposit" />
      <input id="checkingWithdraw" class="withdraw" type="button" value="Withdraw" />
    </div>
    <div id="savings" class="account">
      <h2>Savings</h2>
      <div id="savingsBalance" class="balance">$0</div>
      <input id="savingsInput" class="input" type="text" placeholder="enter an amount" value="0" />
      <input id="savingsDeposit" class="deposit" type="button" value="Deposit" />
      <input id="savingsWithdraw" class="withdraw" type="button" value="Withdraw" />
    </div>
    <script>
    $(function() {
      $("#checkingBalance").on("click", function() {
        var checkingBalance = parseInt($(this).text().replace("$", "")); 
        console.log("This is the checking balance. ", checkingBalance); 
        var deposit = parseInt($("#checkingInput").val()); 
        console.log("This is the deposit: " + deposit);
        var total = deposit + checkingBalance; 
        console.log("This is the total: " + total); 
        $("#checkingBalance").html("$" + total);
        if (total > 0) {
          $("body").removeClass("zero")
        }
      })
    });
  </script>
  </body>

</html>

＆＃13;

试图使银行的存款/取款功能发挥作用

1 个答案: