bekomme keine Nummer (NaN) Fehler html/js

Question

Ich bekomme NaN Fehler beim ersten Klicken auf Radiobutton. Die Seite hat a3 Radio-Button, wenn ich die erste Schaltfläche klicken Sie, Saya NaN und restliche 2 Tasten keine Antwort haben

das ist mein HTML

<input type="hidden" name="totalamount" id="totalamount" value="<?php echo get_total_amount();?>"/

<input type="radio" name="rmr" id="payment1" value="3" onclick="updatepayment(this.value)" /> 
<input type="radio" name="rmr" id="payment2" value="5.5" onclick="updatepayment(this.value)" /> 
<input type="radio" name="rmr" id="payment4" value="10" onclick="updatepayment(this.value)" /> 
<div id="finalamount"> 
</div> 

auch habe ich meine JS

erwähnt

$(document).ready(function(){ 
    $('input[name=rmr]').click(function() { 
     //make sure one is checked  
     if($('input[name=rmr]:checked').length > 0) {  
      $('#finalamount').html($("#totalamount").val() * $("input[name=rmr]:checked").val());  
     } 
    }); 
}); 

Answer 1

Drei Dinge:

1) Da Sie die Menge aus dem "totalamount" -Element verwenden, muss man fragen: Sind Sie sicher das

value="<?php echo get_total_amount();?>" 

... gibt eine gültige Zahl aus? Denn wenn nicht, dann wird der Code

$('#finalamount').html($("#totalamount").val() * $("input[name=rmr]:checked").val()); 

... wird in der Tat in NaN führen. Der Operator * wird versuchen, beide Operanden von Strings in Zahlen zu konvertieren, und natürlich, wenn der von diesem PHP-Code ausgegebene Wert keine gültige Zahl ist (zum Beispiel, wenn $ 0.00 oder so ist), ist das Ergebnis der Umwandlung wird NaN sein. Und NaN mal alles ist NaN.

This example eines ungültigen Betrags in der "totalamount" -Elemente ergibt etwas, das ein Los wie das Verhalten aussieht, das Sie beschreiben. (Dieser Code ist bei Ihnen nicht gleich, ich einige sehr leicht Refactoring haben, siehe unten. Aber für die Zwecke eine ungültige Nummer Demonstrieren, es spielt keine Rolle.)

2) Es gibt keine > bei der Ende dieser versteckten Eingabe im Text Ihrer Frage. Wenn Sie direkt kopieren und einfügen, frage ich mich, ob das das Problem sein könnte?

3) Da Sie jQuery verwenden, sind die Attribute onclick nicht erforderlich. Stattdessen:

$(document).ready(function(){ 
    $("input[name=rmr]").click(function(){ 
     var checked = $("input[name=rmr]:checked"); 
     updatePayment(this.value); 
     if (checked.length > 0) { // make sure one is checked 
     {  
      $("#finalamount").html($("#totalamount").val() * checked.val());  
     } 
    }); 
}); 

... vorausgesetzt, Sie wollen updatePayment jedes Mal aufgerufen.

Live example

Folding updatePayment in das Haupt click Verhalten können Sie Probleme vermeiden, die mit der Reihenfolge, in der Dom0 (onclick Attribut) Handler und DOM2 Handler (diejenigen, die verwendet werden mit jQuery) genannt werden existieren können.

Answer 2

Es funktioniert gut für mich. Den Arbeitscode finden Sie in jsfiddle. Sie müssen sicherstellen, dass der Wert im totalamount-Eingang ein numerischer Wert ist. Sie können den Benutzer parseFloat() verwenden, um den Zeichenfolgenwert in einen Gleitkommawert zu konvertieren. Ex

parseFloat($("#totalamount").val()) * $("input[name=rmr]:checked").val() 

Als @CrowderparseFloat() ist nicht notwendig, da Javascript der Typkonvertierungen kümmern.

Sie versuchen, vor der Berechnung einen/console.log() Befehl zu setzen, um zu sehen, ob der totalAmount einen nicht numerischen Wert hat. Bsp .: alert($("#totalamount").val())