javascript - 尝试制作表格来计算复利

Question

我在这里找到了关于计算利息等的不同类型的代码片段，但找不到我需要的帮助。

我正在制作一个简单的表格并使用 Javascript 查找复利并将其输出为 HTML。

我在有和没有 innerHTML 的情况下使用了 getDocumentById，并将它放在 parseInt() 中。长话短说，我得到“NaN”作为输出。

看看我完成了什么，也许有人可以指出我可能遗漏了什么。谢谢

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

Answer 1

通过ID获取元素后，需要访问value属性，parseInt收到DOM对象，一直等同于NaN。

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>