2017-07-22 109 views
0

我有使用JQuery,HTML和CSS構建的貸款計算器。它的功能正常。奇怪的是我必須刷新頁面才能正確計算它。我不確定我在做什麼(或沒有做)正確。會喜歡一些反饋。貸款計算器(jQuery)不能正常工作

$(document).ready(function() { 
 
    // variables 
 
    var amount = $('#loanAmount').val(); 
 
    var yearlyInterestRate = .12; 
 
    var monthlyInterestRate = yearlyInterestRate/12; 
 
    var twelveMon = 12; 
 
    var eighteenMon = 18; 
 
    var twentyFourMon = 24; 
 
    var duration = $('input[name=duration]:checked').val(); 
 
    var calcButton = $('.calculate'); 
 
    var resetButton = $('.reset'); 
 
    var monthPay; 
 

 
    $('.results').addClass('hidden'); 
 

 

 
    // Calculate Monthly Payment 
 
    calcButton.click(function(event) { 
 
    event.preventDefault(); 
 
    monthPay = (monthlyInterestRate * amount)/[1 - Math.pow((1 + monthlyInterestRate), -duration)]; 
 
    $('.durationValue').text(duration); 
 
    $('.monthlyPayment').text(Math.round(monthPay)); 
 
    $('.results').removeClass('hidden'); 
 
    }); 
 

 
    resetButton.click(function() { 
 
    $(form).reset(); 
 
    }); 
 

 
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<section id="loan-calc"> 
 
    <form id="calculator"> 
 
    <input type="text" name="loanAmount" id="loanAmount" placeholder="Loan Amount"><br> 
 
    <label>Choose your payment duration:</label><br> 
 
    <input type="radio" name="duration" value="12" class="duration"> 12 Months<br> 
 
    <input type="radio" name="duration" value="18" class="duration"> 18 Months<br> 
 
    <input type="radio" name="duration" value="24" class="duration"> 24 Months <br> 
 
    <button class="calculate">Calculate</button> 
 
    <!--   <button class="rest">Reset</button>--> 
 
    </form> 
 
    <p class="results">You chose a duration of <span class="durationValue"></span> months and your monthly payment is $<span class="monthlyPayment"></span> at a 12% yearly interest rate.</p> 
 
</section>

+0

問題它更高效的1是不是做一個片段,使我們可以看到它的行動。我爲你製作了一個。問題2你只能在頁面加載時獲取值。將'var amount = $('#loanAmount')。val();'等放入計算函數中。您需要爲每次點擊獲取它們 – mplungjan

回答

0

您在頁面加載時使用持續時間和金額(文檔準備就緒)。如果通過填充值來更新值,變量將不會被更新。

var amount = $('#loanAmount').val();var duration = $('input[name=duration]:checked').val();移動到'onClick'處理程序中,以便點擊後更新金額和持續時間。

+0

不需要通過設置另一個處理程序來移動它 - 僅在整個計算被觸發時才能獲取值的效率更高 – pkolawa

+0

...又名「進入onclick處理程序」 – DoXicK

+0

@pkolawa,他是談論*另一個*點擊處理程序? – trincot

1

你需要把增值經銷商使用它們

PS裏面的功能:在形式input type="reset" />會的形式復位,無需腳本

$(document).ready(function() { 
 
    $('.results').addClass('hidden'); 
 
    var yearlyInterestRate = .12; 
 
    var monthlyInterestRate = yearlyInterestRate/12; 
 
    var twelveMon = 12; 
 
    var eighteenMon = 18; 
 
    var twentyFourMon = 24; 
 

 

 
    // Calculate Monthly Payment 
 
    $('.calculate').on("click", function(event) { 
 

 
    event.preventDefault(); 
 
    var amount = $('#loanAmount').val(); 
 
    var duration = $('input[name=duration]:checked').val(); 
 
    var monthPay = (monthlyInterestRate * amount)/[1 - Math.pow((1 + monthlyInterestRate), -duration)]; 
 
    $('.durationValue').text(duration); 
 
    $('.monthlyPayment').text(Math.round(monthPay)); 
 
    $('.results').removeClass('hidden'); 
 
    }); 
 

 
    $('.reset').on("click", function() { 
 
    $(form).reset(); 
 
    }); 
 

 
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<section id="loan-calc"> 
 
    <form id="calculator"> 
 
    <input type="text" name="loanAmount" id="loanAmount" placeholder="Loan Amount"><br> 
 
    <label>Choose your payment duration:</label><br> 
 
    <input type="radio" name="duration" value="12" class="duration"> 12 Months<br> 
 
    <input type="radio" name="duration" value="18" class="duration"> 18 Months<br> 
 
    <input type="radio" name="duration" value="24" class="duration"> 24 Months <br> 
 
    <button class="calculate">Calculate</button> 
 
    <!--   <button class="rest">Reset</button>--> 
 
    </form> 
 
    <p class="results">You chose a duration of <span class="durationValue"></span> months and your monthly payment is $<span class="monthlyPayment"></span> at a 12% yearly interest rate.</p> 
 
</section>

1

您正在設置document.ready()上的值 - 所以它甚至在電臺的任何示例都會被點擊之前。將讓你的值到.click()功能

,並從棄用.click()法切換到.on('click', function(){})以防萬一,你會擴大你的形式在未來

+0

Click不被棄用。這是一個簡寫。(「click」 - https://api.jquery.com/click/ – mplungjan