2017-05-11 5 views
0
<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は私の試みですが、私が探していた解決策ではないようです。 html銀行の入出金機能を働かせようとしています

+1

'する必要があります –

答えて

0

ない要素がid#checkingAmountを持って、javascriptcheckingAmount#が不足しています。

#checkingInputcheckingAmountと置き換えます。 #checkingInput要素のvalue属性を"0"に設定してhtmlに設定し、NaNを避けます。

<!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>

関連する問題