2017-01-28 6 views
1

私はちょうど3つの入力フィールドを使用して、結果フィールドにそれらの合計を表示するコードを記述しようとしていたとテキストボックスに3つの数字と表示結果を追加します。人がフィールド1にデータを入れると、結果フィールドにデータが表示され、ユーザーが第2フィールドにデータを入力すると、結果フィールドにフィールド1とフィールド2の合計が表示され、ユーザーがフィールド3にデータを入力すると、合計は結果フィールドに表示する必要があります。私はコードの下に書きますが、成功しません。私は新しい学習者です。はJavascriptを

<body> 
Field 1: <input type="text" id="num1" onkeyup="sum();" > </br> 
Field 2: <input type="text" id="num2" onkeyup="sum();" > </br> 
Field 3: <input type="text" id="num3" onkeyup="sum();"> </br> 
Sum: <input type="text" id="final" /> 



<script type="text/javascript"> 

function sum() 
{ 


var w = document.getElementById('num1').value; 

var x = document.getElementById('num2').value; 

var y = document.getElementById('num3').value; 

var z=parseInt(w)+parseInt(x)+parseInt(y); 


document.getElementByID('final').value=z; 

}  
</script> 

</body> 
+0

あなたはjQueryのを(あなたがそれを使用する方法がわからない場合は、ここでコメントしてください)を使用することができます:ここでは

は実施例です。 –

+0

'document.getElementByID( 'final')。value = z' typoを' getElementById'に修正してみてください。 – azs06

+0

ありがとうございます。私はちょうどそれを修正します。 –

答えて

3

2つの問題をする必要があります:(1)あなたの最後の行の小さなタイプミス、あなたが代わりにgetElementByIdをのgetElementByIdを使用

(2)あなた値が存在しない場合を考慮する必要があります。これを行う方法の1つは、0または0です(値がない場合は0に評価されます)。

function sum() 
{ 
    var w = document.getElementById('num1').value || 0; 
    var x = document.getElementById('num2').value || 0; 
    var y = document.getElementById('num3').value || 0; 

    var z=parseInt(w)+parseInt(x)+parseInt(y); 

    document.getElementById('final').value=z; 
}; 

https://jsfiddle.net/yq60qad0/

+0

ありがとうございます。私はこの日を過ごす。作業コードを取得してうれしい。 –

+0

ただ役に立ちます:) – Tomas

0

これはタイプミスです。 =>

document.getElementByID('final').value=z; 

は、ID、ないID

+0

私を訂正してくれてありがとう。しかし、私が最初の2つのフィールドに入力を入れると、結果フィールドにNaNが表示されます...どのように処理するのですか? –

+0

これは、すべての数値がまだそれらを合計するために定義されていないからです。 NaNは "数字ではない"を意味し、コードは "5"、 "8"、および未定義を加算しようとしています。あなたのコードは、3つの入力がすべて完了したときにのみ正しく動作します。 – MattJ