CODEWITHSUNDEEP
javascripthtmlforms
TomG103
TomG103

Reputation: 312

Trying to make a form to calculate compounded interest

I've found different types of snippets on here calculating interest and so forth but unable to find the help I need.

I'm making a simple form and using Javascript to find the compounded interest and output it in HTML.

I've used the getDocumentById with and without the innerHTML as well as placing it in parseInt(). Long story short, I get 'NaN' as output.

Take a look at what I finished up with and maybe someone can point me as to what I might be missing. Thanks

<form onsubmit="return false">
    <input id="a" name="a" type="number" step="any" placeholder="Present Value"> * (
    <input id="b" name="b" type="number" step="any" placeholder="Number of years"> +
    <input id="c" name="c" type="number" step="any" placeholder="Interest Rate">)^
    <input id="d" name="d" type="number" step="any" placeholder="N number of Years">=
    <button onclick="futureNyears()">Answer</button>
    <p id="futureNanswer"></p>
</form>
<script type="text/javascript">
    function futureNyears() {
        var a = parseInt(document.getElementById('a'));
        var b = parseInt(document.getElementById('b'));
        var c = parseFloat(document.getElementById('c'));
        var d = parseInt(document.getElementById('d'));

        var E = eval(b+c);
        var r = Math.pow(E, d);
        var f = eval(E * r);
        var g = f.toString();

        document.getElementById("futureNanswer").innerHTML = g;
    }
</script>

Upvotes: 2

Views: 964

Answers (5)

Gowtham
Gowtham

Reputation: 1597

In order to get a value from input text box use 

var a = parseInt(document.getElementById('a').value);

instead of 

var a = parseInt(document.getElementById('a'));  


<form onsubmit="return false">
    <input id="a" name="a" type="number" step="any" placeholder="Present Value"> * (
    <input id="b" name="b" type="number" step="any" placeholder="Number of years"> +
    <input id="c" name="c" type="number" step="any" placeholder="Interest Rate">)^
    <input id="d" name="d" type="number" step="any" placeholder="N number of Years">=
    <button onclick="futureNyears()">Answer</button>
    <p id="futureNanswer"></p>
</form>
<script type="text/javascript">
    function futureNyears() {
        var a = parseInt(document.getElementById('a').value);
        var b = parseInt(document.getElementById('b').value);
        var c = parseFloat(document.getElementById('c').value);
        var d = parseInt(document.getElementById('d').value);

        var E = eval(b+c);
        var r = Math.pow(E, d);
        var f = eval(E * r);
        var g = f.toString();

        document.getElementById("futureNanswer").innerHTML = g;
    }
</script>

Upvotes: 1

shishir
shishir

Reputation: 851

You need to use the .value property to return the value of the particular element.

var a = parseInt(document.getElementById('a').value);

The value property sets or returns the value of the option (the value to be sent to the server when the form is submitted)

HTML

<!DOCTYPE html>
<html>
<head>
    <title>CI</title>
</head>
<body>
    <form onsubmit="return false">
    <input id="a" name="a" type="number" step="any" placeholder="Present Value"> * (
    <input id="b" name="b" type="number" step="any" placeholder="Number of years"> +
    <input id="c" name="c" type="number" step="any" placeholder="Interest Rate">)^
    <input id="d" name="d" type="number" step="any" placeholder="N number of Years">=
    <button onclick="futureNyears()">Answer</button>
    <p id="futureNanswer"></p>
</form>
</body>
</html>

JavaScript

<script type="text/javascript">
    function futureNyears() {
        var a = parseInt(document.getElementById('a').value);
        var b = parseInt(document.getElementById('b').value);
        var c = parseFloat(document.getElementById('c').value);
        var d = parseInt(document.getElementById('d').value);

        var E = eval(b+c);
        var r = Math.pow(E, d);
        var f = eval(E * r);
        var g = f.toString();

        document.getElementById("futureNanswer").innerHTML = g;
    }
</script>

Upvotes: 2

Zaki Mustafa
Zaki Mustafa

Reputation: 147

In your case you forgot to write document.getElementById('a').value() because its a form element and you cannot extract its value without value() attribute. Parseint() always return the first number detected in your string .

Upvotes: 3

Pankaj
Pankaj

Reputation: 966

After getting element by ID, you need to access the value attribute, parseInt received DOM object which equated to NaN all time.

function futureNyears() {
        var a = parseInt(document.getElementById('a').value);
        var b = parseInt(document.getElementById('b').value);
        var c = parseFloat(document.getElementById('c').value);
        var d = parseInt(document.getElementById('d').value);

        var E = (b+c);
        var r = Math.pow(E, d);
        var f = (E * r);
        var g = f.toString();

        document.getElementById("futureNanswer").innerHTML = g;
    }
<form onsubmit="return false">
    <input id="a" name="a" type="number" step="any" placeholder="Present Value"> * (
    <input id="b" name="b" type="number" step="any" placeholder="Number of years"> +
    <input id="c" name="c" type="number" step="any" placeholder="Interest Rate">)^
    <input id="d" name="d" type="number" step="any" placeholder="N number of Years">=
    <button onclick="futureNyears()">Answer</button>
    <p id="futureNanswer"></p>
</form>

Upvotes: 3

Roshane Perera
Roshane Perera

Reputation: 132

document.getElementById('a') return the dom element so you have to get the value out of it like below

var a = parseInt(document.getElementById('a').value);

Upvotes: 3

Related Questions