Javascript Berechnung resultierende NaN

Question

Ich habe ein Formular, um den Gesamtwert von einem Formular zu berechnen, aber es führt zu einem Nan Fehler, obwohl die Werte der HTML-Eingaben numerisch ist. Was mache ich falsch?

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

Sie müssen den Radios Zyklus durch den Wert zu erhalten. getElement s ByName gibt mehrere Elemente zurück.

<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 gibt ein Array, und Sie haben alle Radios zu testen, um zu sehen, ob sie überprüft werden.

Versuchen Sie es:

<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

Hier ein Beispiel ist eine Auswahl statt Radiobuttons, und es sieht ein wenig kompaktes und sauber. Ich habe auch jQUery anstelle von Javascript verwendet, weil der Code viel sauberer ist.

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

Eigentlich getElementsByName gibt Array von Elementen mit dem Namen, Namen optradio wird 2 Optionsfelder zugeordnet, so müssen Sie dieses

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>

tun

Answer 5

document.getElementsByName("...") 

gibt eine Knotenliste zurück, keinen einzelnen Knoten. Sie sollten eine ID verwenden, um nur einen einzigen Knoten auszuwählen (bevorzugt). Das ist

var y = document.getElementById("optradio").value 
var z = document.getElementById("extra-hours").value 

Die Eigenschaften „Name“ und „id“ unterschiedliche Bedeutungen haben, so stellen Sie sicher, dass Sie die man verwenden Sie eigentlich bedeuten.

Wenn Sie eine eindeutige ID möchten, verwenden Sie "id". Wenn Sie eine Auswahl Ihrer DOM-Elemente gruppieren möchten, verwenden Sie "name".

Darüber hinaus ist der Wert für das Optionsfeld immer gleich, Sie müssen es basierend auf der Eigenschaft 'ausgewählt' anwenden.

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>

Schließlich, obwohl ich es nicht zeigen gehen, sind Sie wahrscheinlich am besten jQuery jetzt lernen; Alles andere verwendet jQuery. Jeder benutzt jQuery, weil es besser als Basisjavascript ist. Wie Christian Juth in seiner Antwort gezeigt hat, möchten Sie wahrscheinlich auch eine Auswahlbox erstellen.