2016-10-12 6 views
2

ここでは興味などを計算していますが、必要なヘルプを見つけることができないさまざまな種類のスニペットが見つかりました。複合利益を計算するためのフォームを作成しようとしています

私は単純なフォームを作っていて、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> 

答えて

3

IDによって要素を取得した後、あなたはvalue属性にアクセスする必要があるの下のようにそれから値を取得する必要がありますので、DOM要素、parseIntははDOMオブジェクトを受け取りましたこれは常にNaNに等しい。あなたがのdocument.getElementById( 'A')を書くのを忘れて、あなたの場合は

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>

3

document.getElementById('a')リターンあなたが

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

。値()そのフォーム要素なぜなら、あなたは値なし()属性を、その値を抽出することはできません。 Parseint()は常に、文字列で検出された最初の数値を返します。

2

特定の要素の値を返すには、.valueプロパティを使用する必要があります。

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

値プロパティセットまたはオプションの値を返します(フォームが送信されたときに値がサーバーに送信される)

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

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

代わりに

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>

を使用する入力テキストボックスから値を得るために
関連する問題