Calculate percentage with JavaScript

Question

I have a form where I want the user to input a few fields and the form will calculate the total and percentage of goal. I'm new to JavaScript, and I don't know how to calculate a percentage. When I try parseInt(total)/parseInt(goal)*100 I get a NaN error:

<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>

for your `total_amt` and `goal_amt` input fields change `type="text"` to `type="number"`. This will ensure that only numbers are inputted in these fields. — Raman Sahasi, Sep 30 '16 at 04:42
at what point are you trying to calculate the percentage? Where do you put `parseInt(total)/parseInt(goal)*100` in your code. My guess, is that you are getting NaN because you are trying parseInt("") at some point, which would indicate that one of the inputs you have mentioned does not have any value, or perhaps a value that's not a number. — Rafael Emshoff, Sep 30 '16 at 04:51

score 1 · Answer 1 · answered Sep 30 '16 at 04:44

1

NaN means "Not a number". Check if total can be parsed as integer, check if goal can be parsed as integer and the value is NOT zero, then you should be good.

answered Sep 30 '16 at 04:44

Olesia

144
4

score 1 · Accepted Answer · edited Sep 30 '16 at 05:30

I run your code on my local env and then knew why NaN exception thrown out. The variable total is retrieved from html input element value according to your code above, but total variable will be string empty before executed line parseInt(cash)+parseInt(checks)+parseInt(coin);. After that, parseInt will return NaN after parse empty string to int. So you will see NaN on percentage input box.

There is a solution to fix this issue: Code as below:

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

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

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

...

Calculate percentage with JavaScript

2 Answers2