点击'计算'后,我的代码没有显示任何内容。在HTML中

时间:2014-03-17 01:53:47

标签: javascript html

此外,我还意识到在点击“计算”之前键入的值。也就是消失了。直到现在我仍然找不到错误,因为我认为计算抵押贷款的公式是正确的。

HTML code:

<html>

<head>
    <script src="cal_mortgage.js" type="text/javascript"></script>
</head>

<body>
    <form>
        <table>
        <h2>mortgage calculator:</h2>
        <tr><td>principal</td><td><input type="text" id="principal"/></td></tr>
        <tr><td>interest %</td><td><input type="text" id="interest"/></td></tr>
        <tr><td>term (year)</td><td><input type="text" id="term"/></td></tr><p></p>
        <tr><td><input type="submit" value="calculate" onclick="cal_mortgage()"/></td><td></td></tr>
        <tr><td>monthly payment</td><td><input type="text" id="monthly_pay"/></td></tr>
        </table>
    </form>
</body>


</html>

JavaScript代码:

function cal_mortgage()

{
    var PR = form.principal.value; /*present value of the mortgage loan*/             
    var IN = (form.interest.value / 100) / 12; /*interest rate of the mortgage loan*/  
    var PE = form.term.value * 12; /*number of periods of the mortgage loan*/  

    var PAY = (PR * IN) / (1 - Math.pow(1 + IN, -PE)); /*regular payment to apply to the mortgage loan*/

    form.monthly_pay.value = PAY; 
}

2 个答案:

答案 0 :(得分:1)

这似乎有效。但我还没有检查数学:

<html>

<head>
    <script src="cal_mortgage.js" type="text/javascript"></script>
</head>

<body>
    <form>
        <table>
        <h2>mortgage calculator:</h2>
        <tr><td>principal</td><td><input type="text" id="principal" /></td></tr>
        <tr><td>interest %</td><td><input type="text" id="interest" /></td></tr>
        <tr><td>term (year)</td><td><input type="text" id="term" /></td></tr><p></p>
        <tr><td><input type="button" value="calculate" onclick="cal_mortgage()" /></td><td></td></tr>
        <tr><td>monthly payment</td><td><input type="text" id="monthly_pay" /></td></tr>
        </table>
    </form>
<script>
function cal_mortgage()

{
    var PR = document.getElementById("principal").value; /*present value of the mortgage loan*/             
    var IN = (document.getElementById("interest").value / 100) / 12; /*interest rate of the mortgage loan*/  
    var PE = document.getElementById("term").value * 12; /*number of periods of the mortgage loan*/  

    var PAY = (PR * IN) / (1 - Math.pow(1 + IN, -PE)); /*regular payment to apply to the mortgage loan*/

    document.getElementById("monthly_pay").value = PAY; 
}
</script>
</body>


</html>

答案 1 :(得分:0)

在您的html文件中,将<form>更改为<form id="Calculate">,然后将按钮类型从提交更改为按钮

在您的javascript cal_mortgage()函数中,将其添加为第一行:

form = document.getElementById("Calculate")

现在它应该工作

新代码:

function cal_mortgage()

{
    form = document.getElementById('Calculate')
    var PR = form.principal.value; /*present value of the mortgage loan*/             
    var IN = (form.interest.value / 100) / 12; /*interest rate of the mortgage loan*/  
    var PE = form.term.value * 12; /*number of periods of the mortgage loan*/  

    var PAY = (PR * IN) / (1 - Math.pow(1 + IN, -PE)); /*regular payment to apply to the mortgage loan*/

    form.monthly_pay.value = PAY; 
}

<html>
<head>
    <script src="cal_mortgage.js" type="text/javascript"></script>
</head>
<body>
    <form id="Calculate">
        <table>
        <h2>mortgage calculator:</h2>
        <tr><td>principal</td><td><input type="text" id="principal"/></td></tr>
        <tr><td>interest %</td><td><input type="text" id="interest"/></td></tr>
        <tr><td>term (year)</td><td><input type="text" id="term"/></td></tr><p></p>
        <tr><td><input type="button" value="calculate" onclick="cal_mortgage()"/></td><td></td></tr>
        <tr><td>monthly payment</td><td><input type="text" id="monthly_pay"/></td></tr>
        </table>
    </form>
</body>


</html>