Javascriptの計算結果NaN

Question

フォームから合計値を計算するフォームがありますが、html入力の値が数値であってもnanエラーが発生します。私は間違って何をしていますか？

function myFunction() { 
 
    var y = document.getElementsByName("optradio").value; 
 
    var z = document.getElementsByName("extra-hours").value; 
 
    var x = +y + +z; 
 
    document.getElementById("result").innerHTML = x; 
 
}

<label class="radio-inline"> 
 
    <input type="radio" name="optradio" value="25">Half day (3hrs) 
 
</label> 
 
<label class="radio-inline"> 
 
    <input type="radio" name="optradio" value="50">Full day (6hrs) 
 
</label> 
 
<input type="number" value="" min="0" max="6" class="form-control" name="extra-hours"> 
 
<button type="button" onclick="myFunction()">Try it</button> 
 
<p id="result"></p>

Answer 1

あなたはラジオを通じてサイクルが値を取得する必要があります。 getElement s ByNameは複数の要素を返します。

<label class="radio-inline"> 
 
    <input type="radio" name="optradio" value="25">Half day (3hrs) 
 
</label> 
 
<label class="radio-inline"> 
 
    <input type="radio" name="optradio" value="50">Full day (6hrs)</label> 
 

 
<input type="number" value="" min="0" max="6" class="form-control" name="extra-hours"> 
 

 
<button type="button" onclick="myFunction()">Try it</button> 
 

 
<p id="result"></p> 
 

 
<script> 
 
    function valueOfRadio(name) { 
 

 
    // Get all of the radios by name 
 
    var radios = document.getElementsByName(name); 
 

 
    // Go through each one 
 
    for (var i = 0, length = radios.length; i < length; i++) { 
 
     // If it's checked, lets return it's value 
 
     if (radios[i].checked) { 
 
     return radios[i].value; 
 
     } 
 
    } 
 
    
 
    } 
 
    
 
    function myFunction() { 
 
    // Go get the right radio value 
 
    var y = valueOfRadio('optradio'); 
 
    // Same problem here. Multiple returned, but we know we only have one element so we index to 0. 
 
    //You could alternatively use getElementsById for this which will return a single node. 
 
    var z = document.getElementsByName("extra-hours")[0].value; 
 
    var x = +y + +z; 
 
    document.getElementById("result").innerHTML = x; 
 
    } 
 
</script>

Answer 2

getElementsByNameは配列を返し、あなたは彼らがチェックされているかどうかを確認するために、すべての無線をテストする必要があります。

はそれを試してみてください。ここで

<label class="radio-inline"> 
     <input type="radio" name="optradio" value="25">Half day (3hrs) 
    </label><label class="radio-inline"><input type="radio" name="optradio" value="50">Full day (6hrs)</label> 

    <input type="number" value="" min="0" max="6" class="form-control" id="extra-hours"> 

    <button type="button" onclick="myFunction()">Try it</button> 

<p id="result"></p> 

<script> 
function myFunction() { 
    var radios = document.getElementsByName("optradio"); 

    var y = 0; 

    for (var i = 0, length = radios.length; i < length; i++) { 
     if (radios[i].checked) { 

      y += +radios[i].value; 


     } 
    } 
     var z = document.getElementById("extra-hours").value; 
     var x = +y + +z; 
    document.getElementById("result").innerHTML = x; 
} 
</script> 

Answer 3

ではなく、ラジオボタンの選択を使用した例であり、それはもう少しコンパクトできれいに見えます。私はまた、コードが多くのクリーナーであるため、普通のJavascriptではなくjqueryを使用しました。

function myFunction() { 
 
    var result = parseInt($("[name=optradio]").val()) + parseInt($("[name=extra-hours]").val()); 
 
    $("#result").text(result); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<select name="optradio"> 
 
    <option value="25">Half day (3hrs) 
 
    <option value="50">Full day (6hrs) 
 
</select> 
 
<input type="number" value="0" min="0" max="6" class="form-control" name="extra-hours"> 
 
<button type="button" onclick="myFunction()">Try it</button> 
 

 
<p id="result"></p>

Answer 4

実はgetElementsByNameは、名前optradioが2つのラジオボタンに割り当てられている、指定された名前の要素の配列を返しますので、あなたがこの

function myFunction() { 
 
    var radioarray = document.getElementsByName("optradio"); 
 
    var y; 
 
    for (var i = 0; i < radioarray.length; i++) { 
 
    if (radioarray[i].checked) { 
 
     y = radioarray[i].value; 
 
    } 
 
    } 
 

 
    var z = document.getElementsByName("extra-hours")[0].value; 
 
    var x = +y + +z; 
 
    document.getElementById("result").innerHTML = x; 
 
}

<label class="radio-inline"> 
 
    <input type="radio" name="optradio" value="25">Half day (3hrs) 
 
</label> 
 
<label class="radio-inline"> 
 
    <input type="radio" name="optradio" value="50">Full day (6hrs) 
 
</label> 
 
<input type="number" value="" min="0" max="6" class="form-control" name="extra-hours"> 
 
<button type="button" onclick="myFunction()">Try it</button> 
 
<p id="result"></p>

のように行う必要があります

Answer 5

document.getElementsByName("...") 

は、個々のノードではなく、ノードリストを返します。単一のノードだけを選択するには、idを使用する必要があります（推奨）。つまり、「名前」と「id」のプロパティは異なる意味を持つため、実際に意味するものを使用してください。

一意の識別子を使用する場合は、「id」を使用します。選択したDOM要素をグループ化するには、「name」を使用します。

また、ラジオボタンの値は常に同じです。「selected」プロパティに基づいて条件付きで適用する必要があります。私はそれを表示するつもりはないが、

function myFunction() { 
 
    var half = document.getElementById("half"); 
 
    var full = document.getElementById("full"); 
 
    var y = half.checked ? half.value : full.value; 
 
    var z = document.getElementById("extra-hours").value; 
 
    var x = +y + +z; 
 
    document.getElementById("result").innerHTML = x; 
 
}

<label class="radio-inline"> 
 
    <input type="radio" name="optradio" id="half" value="25" checked>Half day (3hrs) 
 
    <input type="radio" name="optradio" id="full" value="50">Full day (6hrs) 
 
</label> 
 
<input type="number" value="" min="0" max="6" class="form-control" id="extra-hours"> 
 
<button type="button" onclick="myFunction()">Try it</button> 
 
<p id="result"></p>

最後に、あなたはおそらく今のjQueryを学ぶ最良のです。他のすべてはjQueryを使用します。誰もがベースのjavascriptよりも優れているので、jQueryを使用します。クリスチャン・ジュースが答えとして示したように、あなたはおそらくそれを選択ボックスにしたいと思うでしょう。