なぜこの関数の結果はNaNとして表示されますか？

Question

私はこのコードのシンプルな一枚持っている：私は私の変数を作るとき、私は間違いなく、より効率的だったかもしれないが、私の問題は、私はparseInt()を使用した後も行くことということであることを取得

var numb1 = document.getElementById("numb1") 
 
var numb2 = document.getElementById("numb2") 
 
var numb3 = document.getElementById("numb3") 
 
var numb4 = document.getElementById("numb4") 
 
var v1 = parseInt(numb1) 
 
var v2 = parseInt(numb2) 
 
var v3 = parseInt(numb3) 
 
var v4 = parseInt(numb4) 
 
var t = parseInt(0) 
 

 
function myFunction() { 
 
    if (numb1.checked == true) { 
 
    var t = v1 + t 
 
    } else if (numb2.checked == true) { 
 
    var t = v2 + t 
 
    } else if (numb3.checked == true) { 
 
    var t = v3 + t 
 
    } else if (numb4.checked == true) { 
 
    var t = v4 + t 
 
    } 
 
    document.getElementById("demo").innerHTML = t 
 
}

<input id="numb1" type="radio" value="10"> 
 
<input id="numb2" type="radio" value="50"> 
 
<input id="numb3" type="radio" value="80"> 
 
<input id="numb4" type="radio" value="120"> 
 

 
<button type="button" onclick="myFunction()">Submit</button> 
 

 
<p id="demo"></p>

を文字列から整数への最終結果はdemoで、NaNと表示されます。変数を定義した方法に何か問題がありますか、それとも最終的な値の計算ですか？

Answer 1

parseInt(elementObject)は有効な数値を返さないためです。

あなたは基数

var v1 = parseInt(numb1.value, 10); 

で、値を解析したかったし、値が実際に変更されたときに、それらの値に内部の機能を取得する必要があります。また

、いくつかのセミコロンを追加し、それらは必ずしも必要ではないが、それはそれらを追加することをお勧めだし、変数に

var numb1 = document.getElementById("numb1"); 
 
var numb2 = document.getElementById("numb2"); 
 
var numb3 = document.getElementById("numb3"); 
 
var numb4 = document.getElementById("numb4"); 
 

 

 
function myFunction() { 
 
    var v1 = parseInt(numb1.value, 10); 
 
    var v2 = parseInt(numb2.value, 10); 
 
    var v3 = parseInt(numb3.value, 10); 
 
    var v4 = parseInt(numb4.value, 10); 
 
    var t = 0; 
 

 
    if (numb1.checked) { 
 
     t = v1 + t; 
 
    } else if (numb2.checked) { 
 
     t = v2 + t; 
 
    } else if (numb3.checked) { 
 
     t = v3 + t; 
 
    } else if (numb4.checked) { 
 
     t = v4 + t; 
 
    } 
 
    
 
    document.getElementById("demo").innerHTML = t 
 
}

<input id="numb1" type="radio" value="10"> 
 
<input id="numb2" type="radio" value="50"> 
 
<input id="numb3" type="radio" value="80"> 
 
<input id="numb4" type="radio" value="120"> 
 

 
<button type="button" onclick="myFunction()">Submit</button> 
 

 
<p id="demo"></p>

Answer 2

を再宣言していない私がすることによって答えに同意しますアデノ問題は、あなたがHTML入力要素を入力していることです。

あなたはすでに答えがあります。

しかし、私はあなたがそうif..else

を使用し、あなたはユーザーが選択する一つの値だけを望んでいることに気づきました。

したがって、読み込み速度を向上させ、コード行を減らすのに役立つ短い方法があります。

`はconsole.log（）`これらの種類の問題をデバッグするために使用しforms

function myFunction(){ 
 
    t=parseInt(document.forms[0]["num"].value); 
 
    document.getElementById("demo").innerHTML=t 
 
}

<form> 
 
<input id="numb1" name="num" type="radio" value="10"> 
 
<input id="numb2" name="num" type="radio" value="50"> 
 
<input id="numb3" name="num" type="radio" value="80"> 
 
<input id="numb4" name="num" type="radio" value="120"> 
 

 
<button type="button" onclick="myFunction()">Submit</button> 
 
</form> 
 
<p id="demo"></p>