2014-11-06 4 views
1

나는 왜 입력 된 텍스트 상자의 숫자가 문자열로 취급되는지 알아 내려고하고있다. 여기서 짧은 스크립트는 두 번째 텍스트 상자에 숫자를 입력 할 때까지 작동합니다. 두 번째 텍스트 상자의 vallue는 문자열로 최종 값에 첨부되며 숫자로 추가되지 않습니다. 나는 parseInt()를 사용하여 시도했지만이 경우 결과는 NaN입니다.자바 스크립트 : 숫자가 문자열로 처리되는 이유는 무엇입니까?

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8"> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script> 

var extras_fee = 0; 

function validate_extra1(){ 
    var extra1_value = document.getElementById('extra1').value; 
    var extra2_value = document.getElementById('extra2').value; 
    var extra1_radiovalue = $('input[name=radio_extra1]:checked').val(); 
    if (extra1_value.length > 0 && extra1_radiovalue == 2000) 
     {extras_fee = 2000;} 
    if (extra1_value.length > 0 && extra1_radiovalue == 4000) 
     {extras_fee = 4000;} 
    if (extra1_value.length == 0) 
     {extras_fee = 0;} 
    extras_fee = extras_fee + extra2_value; 
    document.getElementById('fee_container').innerHTML = extras_fee; 
    } 
$(function(){ 
    $(document).on('click', '#continue_extras', function(){ 
    $("<div class='st'><b>Some title.</b></div>" + 
     "<div class='infwin'>Some text </div> " + 
     "<div>input some text here <input type='text' name='fname' id='extra1' onkeyup='validate_extra1()'>" + 
     "<input type='radio' name='radio_extra1' value='2000' onclick='validate_extra1()'>2000" + 
     "<input type='radio' name='radio_extra1' value='4000' onclick='validate_extra1()'>4000</div>" + 
     "<div class='infwin'>more text here</div> " + 
     "<div>input some numerical values here <input type='text' name='fname' id='extra2' placeholder='minimum 1000' onkeyup='validate_extra1()'> text</div>" + 
     "<div id='fee_container'></div>" + 
     "<div class='button' id='continue_post'>Submit >>></div> " + 
     "<div class='miclear'></div><br />").appendTo('#extras_container'); 
    $('#continue_extras').hide(); 
    }); 
}); 

</script> 
</head> 
<body> 
<div id='continue_extras'>click</div> 
<div id='extras_container'></div> 
</body> 
</html>​ 
+1

'값'이 문자열, 숫자가 아닌이기 때문에. 'parseInt'를 시도하십시오 – elclanrs

+0

시도했습니다. 라인이있었습니다 : extra2_value = parseInt (extra2_value); 하지만 결국 엔 NaN 만 있습니다. 왜? – Sandor

+0

이것을보십시오, http://jsbin.com/zifaforuca/2/edit – defau1t

답변

2

당신은 추가하기 전에 extra2_value을 확인해야합니다 도움이됩니다.

var extra2_value = parseInt(document.getElementById('extra2').value); 
extra2_value = extra2_value?extra2_value:0; 

JsFiddle

+0

이 작업을했습니다 !!! 조금 더 깊이 설명해 주시겠습니까? 감사 – Sandor

1
var extra1_value = document.getElementById('extra1').value; // this is a string 
var extra2_value = document.getElementById('extra2').value; // this is a string 
var extra1_radiovalue = $('input[name=radio_extra1]:checked').val(); // this is a string 

if (extra1_value.length > 0 && extra1_radiovalue == 2000) // this works because "2000" == 2000, if you use === then it would fail 
    {extras_fee = 2000;} // this is a number 
if (extra1_value.length > 0 && extra1_radiovalue == 4000) 
    {extras_fee = 4000;} // this is a number 
if (extra1_value.length == 0) 
    {extras_fee = 0;} // this is a number 

extras_fee = extras_fee + extra2_value; // because extra2_value is a string, it will automatically cast to a string 
// thus concatenating them as a string, not doing a numeric addition 

는 당신이 필요가있는 무엇을 정수로 extra2_value을 변환 할 수 있습니다.

parseInt(extra2_value, 10) // do not forget to use that 10 to tell it what base to use 

문제가 해결 되었습니까?

+0

시도했습니다. 라인이있었습니다 : extra2_value = parseInt (extra2_value); 하지만 결국 엔 NaN 만 있습니다. 왜? – Sandor

+0

시도하기 전에'extra2_value'의 값은 무엇입니까? 'Console.log()'아마도 –

1

값은 다시 문자열로 와서 당신이 그들을 구문 분석해야한다 : 내가 분석 그리고

var value = document.getElementById('test').value; 

console.log('value is', value);

: 내가 먼저 값을 얻을 예를 들어, 링크 http://jsbin.com/quhoxivere/10/edit

그것

var intValue = parseInt(value); 

console.log('value is now ', (typeof intValue));

콘솔 로그에서 invalue 유형이 "숫자"(정수)임을 알 수 있습니다.

희망이

관련 문제