Question

我有一个使用JQuery，HTML和CSS构建的贷款计算器。它运作正常。奇怪的是我必须刷新页面才能正确计算。我不确定我正在做什么（或不做）。会喜欢一些反馈。

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

Answer 1

您需要将vars放在使用它们的函数中

PS：在表单input type="reset" />将重置表单而不需要脚本

＆＃13;

$(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();
  });

})

＆＃13;

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

＆＃13;

Answer 2

您在document.ready()上设置了值 - 所以甚至在点击广播中的任何示例之前都是如此。将您的值转移到.click()函数

如果您将来扩展自己的表单，那么从弃用的.click()方法切换到.on('click', function(){})效率会更高效

Answer 3

您在页面加载上记录持续时间和金额的值（文档就绪）。如果通过填写更新值，则变量不会更新。

将var amount = $('#loanAmount').val();和var duration = $('input[name=duration]:checked').val();移至＆＃39; onClick＆＃39;处理程序，以便在您单击后更新金额和持续时间。

贷款计算器（jQuery）无法正常工作

3 个答案: