我有一个表单,我希望用户输入几个字段,表单将计算目标的总数和百分比。我是JavaScript的新手,我不知道如何计算百分比。当我尝试parseInt(total)/parseInt(goal)*100
时,我收到NaN错误:
<html>
<head>
<style media="screen">
.testform INPUT {
display: block;
margin-bottom: 10px;
border: 1px solid #212121;
height: 35px;
font-size: 16px;
}
</style>
<script type="text/javascript">
calculate = function() {
var cash = document.getElementById('a1').value;
var checks = document.getElementById('a2').value;
var coin = document.getElementById('a3').value;
var goal = document.getElementById('goalamount').value;
var total = document.getElementById('a4').value;
document.getElementById('a4').value = parseInt(cash)+parseInt(checks)+parseInt(coin);
document.getElementById('a5').value = parseInt(total)+parseInt(goal);
}
</script>
</head>
<body>
<form class="testform">
Goal amount <input id="goalamount" type="text" value="3000"/>
Cash Collected <input id="a1" type="text" />
Checks Collected <input id="a2" type="text" />
Coins Collected <input id="a3" type="text" />
Total Collected <input id="a4" type="text" name="total_amt" onblur="calculate()" />
Percent of Goal<input id="a5" type="text" name="goal_amt" />
</form>
</body>
</html>
答案 0 :(得分:1)
NaN表示“不是数字”。检查是否可以将total解析为整数,检查目标是否可以解析为整数且值不为零,那么你应该是好的。
答案 1 :(得分:1)
我在我的本地env上运行你的代码,然后知道为什么NaN异常被抛出。根据上面的代码从html输入元素值中检索变量total,但在执行行parseInt(cash)+parseInt(checks)+parseInt(coin);
之前,total变量将为字符串空。之后,parseInt将在将空字符串解析为int后返回NaN。因此,您将在百分比输入框中看到NaN。
有一个解决方案可以解决此问题:代码如下:
var goal = document.getElementById('goalamount').value;
document.getElementById('a4').value = parseInt(cash)+parseInt(checks)+parseInt(coin);
var total = document.getElementById('a4').value;
...