用 JavaScript 计算百分比

Question

我有一个表单，我希望用户在其中输入几个字段，该表单将计算目标总数和百分比。我是 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>

Answer 1

NaN 表示 "Not a number"。检查 total 是否可以解析为整数，检查 goal 是否可以解析为整数并且值不为零，那么你应该很好。

Answer 2

我运行你的代码在我的本地环境中然后知道为什么抛出 NaN 异常。根据上面的代码，变量总计是从 html 输入元素值中检索的，但是总变量在执行行 parseInt(cash)+parseInt(checks)+parseInt(coin); 之前将为空字符串。之后，parseInt 将空字符串解析为 int 后将 return NaN。所以你会在百分比输入框中看到 NaN。

这个问题有解决办法：代码如下：

var goal = document.getElementById('goalamount').value;

document.getElementById('a4').value = parseInt(cash)+parseInt(checks)+parseInt(coin);

var total = document.getElementById('a4').value;

...

用 JavaScript 计算百分比

Calculate percentage with JavaScript

javascript

nan