JavaScriptによる入力からの数値の読み込みは、常にNaNを返します

Question

2つのフィールドを単純に合計する計算機を作成します。しかし、私が試してみてもうまくいかない。また、parseInt（）を使用する場合も、 "NaN"を返します。

ここでは、コードです：

<script type="text/javascript" language="Javascript"> 
function doSum() 
{ 
var a = document.getElementsByName("a").value; 
var b = document.getElementsByName("b").value; 

var sum = a + b; 

document.getElementById("sum").value = sum; 
} 
</script> 

<form action="" method="POST"> 
<br/>a:<br/> 
<input type="text" name="a" onblur='doSum()' value="0" size="5" /> 
<br/>b:<br/> 
<input type="text" name="b" onblur='doSum()' value="0" size="5" /> 
<br/>Ergebnis<br/> 
<input type="text" id='sum' value='' size="50" disabled/> 
</form> 

そのnoobの質問申し訳ありませんが、何I'amは間違っているの？ 助けてくれてありがとう！

Answer 1

があなたの入力にid Sを与え、彼らがdocument.getElementByIdを使用して一意に識別します。次に、radix parameterが10に設定されたparseIntを使用して10進整数値を取得し、現在のように結果を表示します。

<script type="text/javascript" language="Javascript"> 
function doSum() 
{ 
    var a = parseInt(document.getElementById("a").value, 10); 
    var b = parseInt(document.getElementById("b").value, 10); 

    var sum = a + b; 

    document.getElementById("sum").value = sum; 
} 
</script> 

<form action="" method="POST"> 
<br/>a:<br/> 
<input type="text" id="a" onblur='doSum()' value="0" size="5" /> 
<br/>b:<br/> 
<input type="text" id="b" onblur='doSum()' value="0" size="5" /> 
<br/>Ergebnis<br/> 
<input type="text" id='sum' value='' size="50" disabled/> 
</form> 

getElementsByNameは、要素のリストを返し、あなたがリストに一つだけの要素が含まれている場合でも、あなたはインデックスを通じてたいものを参照する必要があると思います。一方、一意に識別された要素をidで返します。

Answer 2

getElementByIdを使用して、それぞれにIdを付けます。 getElementsByNameは配列を返します。ところで..それは悪い質問ではありません。これは一般的なエラーです。つまり、ラップされたセットを扱うjQueryを使用することによって解決されます。

Answer 3

JavaScriptでのフィールドの配列を返します.getElementsByNameも、あなたがint型が必要すべて文字列である、あなたはおそらくそう、最初の要素を必要とする：

var a = parseInt(document.getElementsByName("a")[0].value, 10); 
var b = parseInt(document.getElementsByName("b")[0].value, 10); 

Answer 4

は、a、bはとても文字列です：

function doSum() 
{ 
var a = parseInt(document.getElementsByName("a").value); 
var b = parseInt(document.getElementsByName("b").value); 

var sum = a + b; 

document.getElementById("sum").value = sum; 
} 

Answer 5

getElementsByNameは複数の要素を返します。したがって、複数の要素を返します。Elements。あなたは、最初に見つかった要素のプロパティを取得する必要があります。

var a = document.getElementsByName('a')[0].value; 

getElementsByNameはのNodeListを返します。これは、その名前で検出されたすべての要素の集合です。これは、数値インデックス（[0]など）を使用して見つかった要素にアクセスし、lengthプロパティがあるという点で、配列のようなものです。他の配列のような機能は利用できません。それが設定されている場合

---

さらに、valueプロパティは常に文字列となります。 +演算子は、値が数値の場合は加算演算子です。それらが文字列の場合は連結演算子です。 "1" + "2"は、Javascriptで"12"に等しいです。あなたは数字に変換するparseIntを使用する必要があります。

var a = document.getElementsByName('a')[0].value; 
a = parseInt(a, 10); // parse as a number in base 10 

Answer 6

getElementsByTagNameはnode listを返します。

function doSum() 
{ 
    var a = document.getElementsByName("a")[0].value; 
    var b = document.getElementsByName("b")[0].value; 

    var sum = parseInt(a, 10) + parseInt(b, 10); 

    document.getElementById("sum").value = sum; 
} 

ですから、インデックスに必要になります。さらに、文字列を処理しないようにするには、parseInt with radix 10が必要です。あなたの電卓で8進数値を受け入れる予定がない限り。

Answer 7

getElementsByNameは、実行しようとしている間違ったデータ型を返す配列を返します。

試してみてください。

function doSum() 
{ 
    var a = document.getElementById("a").value; 
    var b = document.getElementById("b").value; 

    var sum = a + b; 

    document.getElementById("sum").value = sum; 

} 
</script> 

<form action="" method="POST"> 
<br/>a:<br/> 
<input id="a" type="text" name="a" onblur='doSum()' value="0" size="5" /> 
<br/>b:<br/> 
<input id="b" type="text" name="b" onblur='doSum()' value="0" size="5" /> 
<br/>Ergebnis<br/> 
<input type="text" id='sum' value='' size="50" disabled/> 
</form> 

Answer 8

OK、2つの問題は、aとbの桁を取得するgetElementsByNameを使用して値の配列を返します（多くの場合があるため）。 getElementsByIdを使用し、HTMLにIDを挿入します。

また、valueプロパティは文字列であるため、追加する前に数値に変換する必要があります。