用 JavaScript 计算百分比
Posted
技术标签:
【中文标题】用 JavaScript 计算百分比【英文标题】：Calculate percentage with JavaScript 【发布时间】：2017-02-08 13:49:33 【问题描述】：我有一个表单，我希望用户在其中输入几个字段，该表单将计算目标的总数和百分比。我是 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>
【问题讨论】：
Java != JavaScript 对于您的total_amt 和goal_amt 输入字段将type="text" 更改为type="number"。这将确保在这些字段中只输入数字。
您在什么时候尝试计算百分比？您将parseInt(total)/parseInt(goal)*100 放在代码中的什么位置。我的猜测是，您得到 NaN 是因为您在某个时候尝试 parseInt("")，这表明您提到的输入之一没有任何值，或者可能不是数字的值。跨度>
【参考方案1】：
我在本地环境上运行您的代码，然后知道为什么会抛出 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;
...
【讨论】：
【参考方案2】：NaN 表示“不是数字”。检查total是否可以解析为整数，检查goal是否可以解析为整数并且值不为零，那么你应该很好。
【讨论】：
以上是关于用 JavaScript 计算百分比的主要内容，如果未能解决你的问题，请参考以下文章