HTML + JavaScript导致文本框出现NaN错误

HTML + JavaScript results textbox to a NaN error

本文关键字：NaN 错误 文本 JavaScript HTML      更新时间：2023-09-26

我有个小作业要做。每次我在Javascript中声明一个变量为parseFloat。它只是将文本框返回为NaN。下面是代码:

<!DOCTYPE html>
<html>
<head>
  <title>Bank Statement</title>
</head>
<body>
<center>
  <h1 style="font-size:43pt">Statement of Account</h1>
<p>
<form name=fr1>
Customer Name: <input type=text name=ct>
Account No. : <input type=text name=acct><br><br>

<table border=4>
<tr>
    <th>Description</th>
    <th>Debit</th>
    <th>Credit</th>
    <th>Balance</th>
</tr>
<tr>
  <th>Last Balance</th>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td><input type=text name=b1></td>
</tr>
<tr>
  <th>Monthly Salary</th>
  <td><input type=text name=d2></td>
  <td><input type=text name=c2></td>
  <td><input type=text name=b2></td>
</tr>
<tr>
  <th>ATM</th>
  <td><input type=text name=d3></td>
  <td><input type=text name=c3></td>
  <td><input type=text name=b3></td>
</tr>
<tr>
  <th>Refund</th>
  <td><input type=text name=d4></td>
  <td><input type=text name=c4></td>
  <td><input type=text name=b4></td>
</tr>
<tr>
  <th>ATM</th>
  <td><input type=text name=d5></td>
  <td><input type=text name=c5></td>
  <td><input type=text name=b5></td>
</tr>
<tr>
  <th>Telephone Bill</th>
  <td><input type=text name=d6></td>
  <td><input type=text name=c6></td>
  <td><input type=text name=b6></td>
</tr>
<tr>
  <th>Total Movement</th>
  <td><input type=text name=d7></td>
  <td><input type=text name=c7></td>
  <td>&nbsp;</td>
</tr>
</table><br>
<input type=button value="Show" onclick=show()>
<input type=reset value="Clear">
</form>
<script language="javascript">
function show()
{
b1=document.fr1.b1.value;
b2=document.fr1.b2.value;
b3=document.fr1.b3.value;
b4=document.fr1.b4.value;
b5=document.fr1.b5.value;
b6=document.fr1.b6.value;
d2=document.fr1.d2.value;
d3=document.fr1.d3.value;
d4=document.fr1.d4.value;
d5=document.fr1.d5.value;
d6=document.fr1.d6.value;
d7=document.fr1.d7.value;
c2=document.fr1.c2.value;
c3=document.fr1.c3.value;
c4=document.fr1.c4.value;
c5=document.fr1.c5.value;
c6=document.fr1.c6.value;
c7=document.fr1.c7.value;

b1=parseFloat(b1);
b2=parseFloat(b2);
b3=parseFloat(b3);
b4=parseFloat(b4);
b5=parseFloat(b5);
b6=parseFloat(b6);
d2=parseFloat(d2);
d3=parseFloat(d3);
d4=parseFloat(d4);
d5=parseFloat(d5);
d6=parseFloat(d6);
d7=parseFloat(d7);
c2=parseFloat(c2);
c3=parseFloat(c3);
c4=parseFloat(c4);
c5=parseFloat(c5);
c6=parseFloat(c6);
c7=parseFloat(c7);
document.fr1.b2.value=(b1-d2+c2);
document.fr1.b3.value=(b2-d3+c3);
document.fr1.b4.value=(b3-d4+c4);
document.fr1.b5.value=(b4-d5+c5);
document.fr1.b6.value=(b5-d6+c6);
document.fr1.d7.value=(d2+d3+d4+d5+d6);
document.fr1.c7.value=(c2+c3+c4+c5+c6);
}
</script>
</center>
</body>
</html>

所以我不知道为什么它给我NaN。我错过了什么提示或信息吗?

编辑:这是我在NaN: http://gyazo.com/73ae7a6d0fbbf4500b7547425c367349得到的——注意，balance和Credit给出了第二个余额NaN

代码中有两个错误:

  1. 如果你没有声明你的局部变量，你就会成为隐式全局变量的牺牲品。

  2. 您正在解析带有空白值的字段，而不检查结果。parseFloat("")返回NaN

如果你声明你的变量并检查你没有解析空白字段，你就不会有NaN溜进东西。

如果您想将空白字段视为0，您可以使用JavaScript的强大的||操作符:

b1 = parseFloat(b1) || 0;

除了这些错误之外，任何时候你发现自己在编写像b1、b2、b3这样的长变量名列表时，请考虑使用循环和/或数组。

相关文章：