jQuery .val() parseInt를 사용하여 Int로 변환 할 수 없습니다.

Question

parseInt()을 사용해 보았습니다. 나는 아직도 type="number"에 필드를 변환

$("#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 });

나는 시도 ...이 코드를 사용하여 NaN이 오류를 얻을. .val()은 양식 필드의 실제 값을 가져오고 양식 필드의 개체 참조는 가져 오지 않는다는 것을 이해하고 있으므로 .val() 방법을 사용합니다.

Answer 1

물론 .val() 결과를 parseInt을 통해 통합으로 변환 할 수 있습니다. parseInt 메서드는 문자열을 첫 번째 매개 변수 (MDN. parseInt)로 받아들이는 반면 .val()은 "FIRST matched element의 값 특성 값"(W3Schools. jQuery val() Method)을 텍스트 입력의 경우 문자열 (W3Schools. Input Text value Property)으로 반환합니다. 따라서 코드에는 아무런 문제가 없으며 여기서 (length > 0 && width > 0) NaN 보호가 일반적입니다.

2. 일부 리팩토링을 권합니다. 하나의 함수로 핸들러를 추출하고 간단하게 출력 :

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 : 당신은`.val()`당신이 얻을하려는 필드의 HTML 코드를 포함하지 않은 https://plnkr.co/edit/D5YcsQGJzqqIUbou0rxI?p=info