使用文本输入字段时出现 Javascript 中的 NaN
Posted
技术标签:
【中文标题】使用文本输入字段时出现 Javascript 中的 NaN【英文标题】：NaN in Javascript showing up when using a text input field 【发布时间】：2013-06-21 17:41:27 【问题描述】：我正在尝试使用一个简单的 javascript 函数，该函数旨在与带个位数的 SELECT 下拉菜单一起使用，但现在我需要在访问者键入带小数点的值时使用它。即使我输入 30 或任何数字，我也会使用当前的 javascript 获得 NaN。关于如何获得我的总数的任何建议？
JAVASCRIPT：
$(function ()
$('.DoPricing').change(function ()
var total = 0;
$('.DoPricing').each(function ()
total += parseInt($(this).val());
);
$('#TotalPrice').html('$' + total);
);
);
HTML：
<form action="myactionpage.php" method="POST">
<table>
<tr>
<td>How much will you be paying today?</td>
<td>$<input type="text" name="howmuch" id="howmuch" placeholder="0.00" class="DoPricing"></td>
</tr>
<tr>
<td><div class="totalbox">Total Amount Due Today: <strong><span id="TotalPrice">$0.00</span></strong></div>
</td>
</tr>
<tr><td><input type="submit" id="submit" name="submit" value="Submit Payment" class="submitbut" /></td>
</tr>
</table>
</form>
【问题讨论】：
制作小提琴以获得更多响应...！！ 你有多个输入框吗？ 使用parseInt()，您应该始终将第二个参数传递给指示您正在使用的基数的函数（对于您需要的parseInt($(this).val(), 10)，否则输入08，我认为09将等于零（由于被读取为无效的八进制数）。此外，如果您需要输入的十进制值，请使用 parseFloat() 而不是 parseInt()（但请注意，parseFloat() 不采用 base 参数，它始终仅适用于 base 10 又名十进制）。
总计 += parseFloat($(this).val()), 10;
可以，但在第一个条目上不起作用。它出现了NaN。但是如果我在第二个或第三个盒子里放一些东西，它会加上小数。
【参考方案1】：
试试这个：
$(function ()
$('.DoPricing').on("keyup",function ()
var total = 0;
$('.DoPricing').each(function ()
total += parseFloat($(this).val()) || 0;
);
$('#TotalPrice').html('$' + total);
);
);
现在接受小数，这里是demo
【讨论】：
【参考方案2】：Your basic example works for me. 我猜是there are other elements on the page with class, but that don't necessarily have values，你希望它们默认为零。当输入没有值时，.val() 返回空字符串，parseInt('', 10) 返回NaN，而不是0，所以你得不到你想要的。
这很容易解决：
total += parseInt($(this).val()) || 0;
演示：http://jsfiddle.net/mattball/2rgku
【讨论】：
这很好用，但它不支持小数点。有没有办法让它支持小数？ 使用parseFloat 而不是parseInt。【参考方案3】：
我假设您也需要小数，但您使用的是 parseInt 而不是 parseFloat，如果您使用的是小数（因为它是钱），那么您应该使用 toFixed。在下面的代码中，我假设用户将使用 .作为十进制符号，应该只有一个。在值中（没有千位分隔符）。
在你的 for each 中，你将一个非常好的可用 this 转换为一个 jQuery 对象，只是为了获取值。我已将 $(this).val() 更改为 this.value，因此不需要转换。
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script type="text/javascript" src="jquery-1.9.0.js"></script>
</head>
<body>
<form action="myactionpage.php" method="POST">
<table>
<tr>
<td>How much will you be paying this morning?</td>
<td>$<input type="text" name="howmuch" id="howmuch" placeholder="0.00" class="DoPricing"></td>
</tr>
<tr>
<td>How much will you be paying this evening?</td>
<td>$<input type="text" name="howmuch" id="howmuch1" placeholder="0.00" class="DoPricing"></td>
</tr>
<tr>
<td><div class="totalbox">Total Amount Due Today: <strong><span id="TotalPrice">$0.00</span></strong></div>
</td>
</tr>
<tr><td><input type="submit" id="submit" name="submit" value="Submit Payment" class="submitbut" /></td>
</tr>
</table>
</form>
<script type="text/javascript">
(function ()
function getValue(el)
if (el.value === "") return 0;
var nr = parseFloat(el.value);
// only 0 to 9 or . and only one . used as decimal symbol
if (/[^0-9.]/.test(el.value) || /.*?\..*?\./.test(el.value))
return false;
return nr;
$('.DoPricing').on("keyup", null, null, function (e)
var $this = $(this),
val = getValue(this),
total = 0;
if(val!==false)
$this.data("pref",val);
else
$this.val($this.data("pref")||"");
$('.DoPricing').each(function ()
total += parseFloat(this.value,10)||0;
);
$('#TotalPrice').html('$' + total.toFixed(2));
);
)();
</script>
</body>
</html>
【讨论】：
我做了小数，但这段代码不起作用。有什么我想念的吗？我复制了javascript函数。 您可以按 F12 并查看控制台，firefox 和 chome 都会告诉您一些有用的信息，我的猜测是代码中的 jQuery 引用实际上并不指向 jQuery 库。 你必须有 吗？ @PhilMulkins 在您的示例代码中使用 $(... '不添加 jquery 库就不会做任何事情，因此不会我的，因为我假设您将它包含在您的页面中。 我已经有了这个，但它不起作用：以上是关于使用文本输入字段时出现 Javascript 中的 NaN的主要内容，如果未能解决你的问题，请参考以下文章
将输入字段聚焦在React组件中 - 尝试创建ref时出现类型错误
使用 .clear() *JAVA* *ANDROID* 清除文本字段时出现问题