jQuery .val() Impossible de convertir en Int en utilisant parseInt

Question

J'ai essayé parseInt() en vain. Je reçois encore des erreurs NaN en utilisant ce 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 });

J'ai essayé de convertir les champs type="number". J'utilise la méthode .val() car il est de ma compréhension que .val() tirera la valeur réelle du champ de formulaire et pas une référence d'objet au champ de formulaire.

Answer 1

1. Bien sûr, vous pouvez convertir le résultat .val() en integert via parseInt. parseInt accepte la chaîne en tant que premier paramètre (MDN. parseInt), tandis que .val() renvoie "la valeur de l'attribut de valeur de l'élément correspondant FIRST" (W3Schools. jQuery val() Method) qui est chaîne dans le cas d'entrée de texte (W3Schools. Input Text value Property). Donc, il n'y a pas de problème avec votre code et votre (length > 0 && width > 0) NaN-protection est assez commun ici.

2. Je recommanderais de faire un refactoring. Extrait vos gestionnaires en une seule fonction et de simplifier la production:

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