点击'calculate'在html中

My codes show nothing after clicking 'calculate' in html

本文关键字：html calculate 点击      更新时间：2023-09-26

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

HTML代码:

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

这似乎行得通。但是我还没有检查数学:

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

在html文件中，将<form>更改为<form id="Calculate">，并将按钮类型从submit更改为button

在你的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>
相关文章：