Question

我试图弄清楚为什么输入文本框中的数字被视为字符串。这里的简短脚本可以解决我在第二个文本框中输入数字的问题。来自第二个文本框的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>

Answer 1

在添加之前，您必须验证extra2_value。

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

JsFiddle

Answer 2

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

问题解决了吗？

Answer 3

值以字符串形式返回，您必须解析它们：的 http://jsbin.com/quhoxivere/10/edit

在示例链接中，我首先获得值：

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

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

然后我解析它

var intValue = parseInt(value);

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

在控制台日志中，您可以看到invalue的类型是“number”（整数）。

希望这有帮助

Javascript：为什么数字被视为字符串？

3 个答案: