CODEWITHSUNDEEP
javascripthtml
user3310635
user3310635

Reputation: 53

My codes show nothing after clicking 'calculate' in html

Furthermore,I also realize that the values typed before clicking 'calculate' are disappear also.Until now I still cannot find the errors because I think my formula in calculating mortgage loan is correct.

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

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

Upvotes: 0

Views: 122

Answers (2)

sshashank124
sshashank124

Reputation: 32189

In your html file, change <form> to <form id="Calculate"> and change button type from submit to button

In your javascript cal_mortgage() function, add this as your first line:

form = document.getElementById("Calculate")

Now it should work

NEW CODE:

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>

Upvotes: 0

laertiades
laertiades

Reputation: 2012

This seems to work. But I haven't checked the mathematics:

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

Upvotes: 1

Related Questions