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

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

• javascript
• html
• forms

5 Answers 5

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>

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

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 .

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>

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>