jQuery .val() kann nicht konvertiert werden in Int mit ParseInt

Question

Ich habe parseInt() vergeblich versucht. Ich bekomme immer noch NaN Fehler mit diesem Code ...

$("#belt-length").on("input", function(){ 
 
\t \t \t var length = parseInt($("#belt-length").val(), 10); 
 
\t \t \t var width = parseInt($("#belt-width").val(), 10); 
 
\t \t \t if(length > 0 && width > 0) { 
 
\t \t \t \t var squaremm = length * width; 
 
\t \t \t \t var square = squaremm/1000000; 
 
\t \t \t \t $("#belt-square-meters").html(square.toString() + "m<sup>2</sup>"); 
 
\t \t \t } else { 
 
\t \t \t \t $("#belt-square-meters").html("0.00 m<sup>2</sup>"); 
 
\t \t \t }; 
 
\t \t }); 
 
\t \t $("#belt-width").on("input", function(){ 
 
\t \t \t var length = parseInt($("#belt-length").val(), 10); 
 
\t \t \t var width = parseInt($("#belt-width").val(), 10); 
 
\t \t \t if(length > 0 && width > 0) { 
 
\t \t \t \t var squaremm = length * width; 
 
\t \t \t \t var square = squaremm/1000000; 
 
\t \t \t \t $("#belt-square-meters").html(square.toString() + "m<sup>2</sup>"); 
 
\t \t \t } else { 
 
\t \t \t \t $("#belt-square-meters").html("0.00 m<sup>2</sup>"); 
 
\t \t \t }; 
 
\t \t });

Ich habe versucht, die Felder zu type="number" konvertieren. Ich benutze die .val() Methode, da es mein Verständnis ist, dass .val() den tatsächlichen Wert des Formularfelds und nicht eine Objektreferenz auf das Formularfeld ziehen wird.

Answer 1

1. Natürlich können Sie .val() Ergebnis zu Integert über parseInt konvertieren. parseInt Methode akzeptiert String als ersten Parameter (MDN. parseInt), während .val() "den Wert des Wertattributs des ersten übereinstimmenden Elements" (W3Schools. jQuery val() Method) zurückgibt, das eine Zeichenfolge in Texteingabe ist (W3Schools. Input Text value Property). Es gibt also kein Problem mit Ihrem Code und Ihr (length > 0 && width > 0) NaN-Schutz ist hier ziemlich üblich.

2. Ich würde ein Refactoring empfehlen. Extrahieren Sie Ihre Handler in eine einzelne Funktion und vereinfacht Ausgabe:

function processInput() { 
    var length = parseInt($("#belt-length").val(), 10); 
    var width = parseInt($("#belt-width").val(), 10); 
    var square = '0.00'; 
    if(length > 0 && width > 0) { 
     var squaremm = length * width; 
     square = squaremm/1000000; 
    } 
    $("#belt-square-meters").html(square + "m<sup>2</sup>"); 
} 

$("#belt-length").on("input", processInput); 
$("#belt-width").on("input", processInput); 

DEMO: https://plnkr.co/edit/D5YcsQGJzqqIUbou0rxI?p=info