Question

过去几天我一直在疯狂地试图解决这个问题，而我完全不知道该怎么办。

对于我必须为课程做的作业，我们必须分析以下JavaScript代码并更正错误。我已经设法弄清楚了大部分内容，但我最后一部分被困住了。

每当我点击＆＃34;计算＆＃34;按钮，它返回"$NaN.undefined"每月付款金额。我一遍又一遍地重复了代码，一切似乎与我在教科书中显示的内容相符，所以我不知道我需要改变什么以使其正常工作。

我刚刚开始学习JavaScript，所以我对此非常陌生。任何人都可以给予我的帮助或指导将非常感激。

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> 
<title>Make10-1 Oakwood Mortgage</title>
<script type="text/javascript">
<!--Hide from old browsers
var thisMsg="  ** See us for your auto loan financing needs!!! **  "
var beginPos=0
function scrollingMsg() {
   msgForm.scrollingMsg.value=thisMsg.substring(beginPos,thisMsg.length)+thisMsg.substring(0,beginPos)
   beginPos+=1
   if (beginPos > thisMsg.length) {
      beginPos=0
   }
   window.setTimeout("scrollingMsg()",200)
}

var salesAmt
var loanAmt
var loanRate
var loanYears

function valSaleDownAmt() {
    var salesAmt=parseInt(LoanCalc.SaleAmt.value,10)
    if (isNaN(salesAmt) || (salesAmt <=0)) {
        alert("The sales amount is not a valid number!")
        LoanCalc.SaleAmt.value = ""
        LoanCalc.SaleAmt.focus()
    }
    else {
        var DownPayment=parseFloat(LoanCalc.DownPmt.value)/100
        if (isNaN(DownPayment) || (DownPayment <= 0) || DownPayment > 100) {
           alert("The Down Payment Rate is not a valid number!")
           LoanCalc.DownPmt.value = " "
           LoanCalc.DownPmt.focus()
    }
        else {
            var amtDown = salesAmt*DownPayment
            var loanAmt = salesAmt-amtDown
            LoanCalc.LoanAmt.value = dollarFormat(loanAmt.toFixed(2))
            LoanCalc.Rate.focus()
        }
    }
}

function CalcLoanAmt() {
    loanRate=parseFloat(LoanCalc.Rate.value)
    if (isNaN(loanRate) || (loanRate <= 0)) {
        alert("The interest rate is not a valid number!")
        LoanCalc.Rate.value = ""
        LoanCalc.Rate.focus()
    }
    else {
        loanYears=parseInt(LoanCalc.Years.selectedIndex)
        if (isNaN(loanYears) || (loanYears < 1)) {
            alert("Please select a valid number of years from the list!")
            LoanCalc.Years.selectedIndex = "0"
            LoanCalc.Years.focus()
        }
        else {
        var monthlyPmt = monthly(loanAmt,loanRate,loanYears)
        LoanCalc.Payment.value=dollarFormat(monthlyPmt.toString())
        }
    }
}

function monthly(loanAmt,loanRate,loanYears) {
    var Irate = loanRate/1200
    var Pmts = loanYears*12
    var Amnt = loanAmt * (Irate / (1 - (1 / Math.pow(1+Irate,Pmts))))
    return Amnt.toFixed(2)
}

function dollarFormat(valuein) {
    var formatValue = ""
    var formatDollars = ""
    formatAmt = valuein.split(".",2)
    var dollars = formatAmt[0]
    var dollarLen = dollars.length
    if (dollarLen > 3) {
        while (dollarLen > 0) {
            tempDollars = dollars.substring(dollarLen - 3,dollarLen)
                if (tempDollars.length == 3) {
                    formatDollars = "," + tempDollars + formatDollars
                    dollarLen = dollarLen - 3
                } else {
                    formatDollars = tempDollars + formatDollars
                    dollarLen = 0
                }
            }
        if (formatDollars.substring(0,1) == ",")
            dollars = formatDollars.substring(1,formatDollars.length)
        else    
            dollars = formatDollars
        }
        var cents = formatAmt[1]
        var formatValue="$"+dollars+"."+cents
        return formatValue
    }

 function popUpAd() {
    open("make10-1notice.html","noticeWin","width=520,height=270")
 }

 function lastModified() {
    var lastModDate = document.lastModified
    var lastModDate = lastModDate.substring(0,10)
     displayDateLast.innerHTML="<span style='font-family:Arial, Helvetica, sans-serif; font-size:9px; font-weight:bold'>This document was last modified "+lastModDate+"</span>"
 }

//-->
</script>
<style type="text/css">
<!--
body {
background-image: url(financial_symbol.jpg);
}
-->
</style>
</head>
<body onload="scrollingMsg(); popUpAd(); lastModified()">
<div align="center">
<p align="center"><img src="make10-1banner.jpg" width="750" height="120" alt="banner" /></p>
<form id="msgForm" action="">
<p style="text-align:center"><input type="text" name="scrollingMsg" size="25" /></p>
</form>
</div>
<div style="font-family:Arial, Helvetica, sans-serif">
<h3 align="center">Home Loan Payment Calculator</h3>
<form id="LoanCalc" action="">
<table width="346" align="center" cellspacing="3">
    <tr>
       <td align="right">
          <span style="color:#cc0000">*</span>Sale Price:
       </td>
       <td><input type="text" name="SaleAmt" id="SaleAmt" size="9" /></td>
    </tr>
    <tr>
      <td align="right">
         <span style="color:#cc0000">*</span> Down Payment as a percent
      </td>
      <td><input name="DownPmt" type="text" id="DownPmt" size="4" onblur="valSaleDownAmt()" /> 
      %</td>
    </tr>
    <tr>
       <td align="right">
          <span style="color:#cc0000">*</span> Interest Rate (e.g. 5.9):
      </td>
       <td><input type="text" name="Rate" id="Rate" size="4" /> %  
       </td>
    </tr>
<tr>
       <td align="right">
          <span style="color:#cc0000">*</span> Select Number of Years:  
  </td>
       <td><select name="Years" id="Years">
         <option selected="selected">Select Years</option>
         <option value="10">10</option>
         <option value="15">15</option>
         <option value="20">20</option>
         <option value="25">25</option>
         <option value="30">30</option>
         <option value="40">40</option>
       </select></td>
    </tr>
    <tr>
       <td align="right">
         <input name="button" type="button" value="Calculate" onclick="CalcLoanAmt()" />
       </td>
       <td>
         <input name="Reset" type="reset" />
       </td>
    </tr>
    <tr>
      <td align="right">
         <span style="color:#cc0000">*</span> Loan Amount          
      </td>
      <td>
        <input name="LoanAmt" type="text" id="LoanAmt" size="9" />
      </td>
    </tr>
    <tr>
       <td align="right">
          <span style="font-weight:bolder">Monthly Payment</span>: 
       </td>
       <td><input type="text" name="Payment" id="Payment" value=" " size="12" /></td>
    </tr>
</table>
<p style="color:#cc0000; text-align:center">* Indicates a required field.</p>
</form>
</div>
<div id="displayDateLast" style="margin-left:5%">
</div>
</body>
</html>

Answer 1

学习使用调试器逐步执行代码的绝佳机会。在函数中添加几个断点来计算值，并设置监视用于计算每月付款的变量，并确定它们开始返回无效值的位置。您可以立即找到有问题的代码：）

您可以在https://developer.chrome.com/devtools/docs/javascript-debugging了解Chrome的调试器。在https://www.youtube.com/watch?v=htZAU7FM7GI还有一个不错的介绍性视频。

此外，虽然技术上不需要，但您应该用分号结束语句。如果您不知道Javascript的所有各种语句规则，则遗漏分号会产生意外结果。

Answer 2

我认为比尔有最好的“答案”。但我认为在这个特定的例子中，你已经在2个地方定义了loanAmt（var loanAmt）。

我认为你不希望它在第二位（局部变量）定义。

当CalcLoadAmount立即调用Monthly时，未定义`loadAmt“的值。我尝试删除第二个变量声明，它可能是您需要的修复.... / p>

function valSaleDownAmt() {
    var salesAmt=parseInt(LoanCalc.SaleAmt.value,10)
    if (isNaN(salesAmt) || (salesAmt <=0)) {
        alert("The sales amount is not a valid number!")
        LoanCalc.SaleAmt.value = ""
        LoanCalc.SaleAmt.focus()
    }
    else {
        var DownPayment=parseFloat(LoanCalc.DownPmt.value)/100
        if (isNaN(DownPayment) || (DownPayment <= 0) || DownPayment > 100) {
           alert("The Down Payment Rate is not a valid number!")
           LoanCalc.DownPmt.value = " "
           LoanCalc.DownPmt.focus()
    }
        else {
            var amtDown = salesAmt*DownPayment

            //
            // THIS IS THE LINE I CHANGED RIGHT BELOW THIS COMMENT**
            //
            loanAmt = salesAmt-amtDown
            LoanCalc.LoanAmt.value = dollarFormat(loanAmt.toFixed(2))
            LoanCalc.Rate.focus()
        }
    }
}

Answer 3

我认为问题的出现是因为你的价值观始终未定义。在声明变量的脚本顶部，没有给出默认值。尝试给它们默认值0.你不应该再定义。这不会完全解决您的问题，但这是一个良好的开端。此外，您应该尝试通过将变量放在变量之前使变量成为全局变量。所以对于顶部的变量呢 this.salesAmt = 0 this.loanAmt = 0 this.loanRate = 0 this.loanYears = 0

它们出现在你的代码中的任何地方都会把它放在它们面前。

Answer 4

问题与Brad Parks提到的loanAmt变量有关（它不会让我发表评论）。如果将以下代码添加到CalcLoanAmt（）的开头，该函数将起作用。虽然可能有更好的方法来执行此操作，但此代码将修复它。祝你好运！

loanAmt=parseInt(LoanCalc.SaleAmt.value,10) - (parseFloat(LoanCalc.DownPmt.value)/100)

Answer 5

我在你的两个函数中做了一些修改，其余的函数和html都很好。它有效，请检查： -

         function valSaleDownAmt() {
            var saleAmtInput = document.getElementById("SaleAmt"),
            salesAmt=parseInt(saleAmtInput.value,10),

            downPaymentInput = document.getElementById('DownPmt'),
            DownPayment=parseFloat(downPaymentInput.value)/100,
            loanRateInput = document.getElementById('Rate'),
            loanRate=parseFloat(loanRateInput.value),
            loanYearsInput = document.getElementById('Years'),
            loanYears=parseInt(loanYearsInput.value);

            if (isNaN(salesAmt) || (salesAmt <=0)) {
                alert("The sales amount is not a valid number!")
                saleAmtInput.value = ""
                saleAmtInput.focus()
            }
            else if (isNaN(DownPayment) || (DownPayment <= 0) || DownPayment > 100) {
                alert("The Down Payment Rate is not a valid number!")
                downPaymentInput.value = " "
                downPaymentInput.focus()
            } else   if (isNaN(loanRate) || (loanRate <= 0)) {
                alert("The interest rate is not a valid number!")
                loanRateInput.value = ""
                loanRateInput.focus()
            } else  if (isNaN(loanYears) || (loanYears < 1)) {
                alert("Please select a valid number of years from the list!")
            }
            else {
                CalcLoanAmt(salesAmt,DownPayment,loanRate,loanYears); 
            }
        }

        function CalcLoanAmt(salesAmt,DownPayment,loanRate,loanYears) {
            var amtDown = salesAmt*DownPayment,
            loanAmt = salesAmt-amtDown,
            monthlyPmt = monthly(loanAmt,loanRate,loanYears);
            document.getElementById('Payment').value=dollarFormat(monthlyPmt.toString());
            document.getElementById('LoanAmt').value = loanAmt;
        }

这意味着，不需要全局变量，如： -

var salesAmt
var loanAmt
var loanRate
var loanYears

您可以删除此变量。

你必须在html的两个地方进行修改： -

一个是： -

     <tr>
         <td align="right">
             <span style="color:#cc0000">*</span> Down Payment as a percent
         </td>
         <td><input name="DownPmt" type="text" id="DownPmt" size="4" /> 
          %</td>
      </tr>

这意味着，您必须在输入框的模糊处删除函数调用。

第二个是： -

   <tr>
      <td align="right">
         <input name="button" type="button" value="Calculate" onclick="valSaleDownAmt()" />
       </td>
        <td>
          <input name="Reset" type="reset" />
         </td>
   </tr>

这意味着您可以在单击计算按钮时调用函数valSaleDownAmt而不是函数CalcLoanAmt。

前面代码的功能是相同的，但在某些情况下会引起一些问题，所以我认为这是更合适的代码。试试吧。

JavaScript抵押贷款计算器返回“NaN”每月付款

5 个答案: