CODEWITHSUNDEEP
javascriptjquery
Brent Nicolet
Brent Nicolet

Reputation: 345

Loan Calculator (jQuery) not working right

I have a loan calculator that I have built using JQuery, HTML, and CSS. It functions ok. The weird thing is I have to refresh the page in order to get it to calculate correctly. I'm not sure what I'm doing (or not doing) correctly. Would love some feedback.

$(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>

Upvotes: 0

Views: 756

Answers (3)

mplungjan
mplungjan

Reputation: 178285

You need to put the vars inside the function that uses them

PS: In a form an input type="reset" /> will reset the form without needing script

$(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>

Upvotes: 1

pkolawa
pkolawa

Reputation: 683

You're setting values on document.ready() - so it's even before any of examples in radio will be clicked. Move getting you values into the .click() function

And it's even more efficient to switch from deprecated .click() method to .on('click', function(){}) just in case you'll expand your form in the future

Upvotes: 1

DoXicK
DoXicK

Reputation: 4812

you take the values of duration and amount on pageload (document ready). if you update the values by filling them in, the variables won't get updated.

move var amount = $('#loanAmount').val(); and var duration = $('input[name=duration]:checked').val(); into the 'onClick' handler so that the amount and duration get updated once you click.

Upvotes: 0

Related Questions