Javascript returning NaN

Question

I'm attempting to display a subtotal each time a customer enters a quantity. However, when I loop through my inputs, I get a NaN as the total. I believe it may be the way I'm declaring the subtotal variable in my script, but I haven't come across this before:

$('.item-qty input').bind('keyup', function(){

   var subtotal = 0.0;

   $('.item-qty input').each(function(){
      var class = $(this).attr('id');
      var qty = $(this).val();                     
      var price = $('.'+class).html();

      price = parseFloat(price);
      qty = parseInt(qty);
      subtotal = subtotal + (price * qty);
   });

   $('.subtotal input').val(subtotal);
});

Can you give an example for the values? `parseFloat` and `parseInt` will return `NaN` if they cannot parse the string into a number. You should not use floating point values for financial computations because of the rounding errors. Make all your computations in cents. Also, in some browsers (like FF5) you will not be able to use `class` as variable name, as it is a reserved keyword. — Felix Kling, Aug 31 '11 at 23:50
Why not to try to debug? Go over steps and check content of variables, this will help you to localize problem. — Andrey, Aug 31 '11 at 23:50
Also, just as a hint, try not to use "class" as a variable-name. Some browsers might not like that. — Alxandr, Aug 31 '11 at 23:53
When I loop through, the subtotal gets calculated correctly the first time. The next time it goes through the loop, the subtotal is NaN. — csm232s, Aug 31 '11 at 23:56
And yet another thing: Don't forget to pass the radix to `parseInt`, otherwise you will get problems with numerical strings starting with `0`. — Felix Kling, Aug 31 '11 at 23:57

score 23 · Accepted Answer · edited May 23 '17 at 12:33

23

parseFloat and parseInt can return NaN if the first character of the string cannot be converted to a number.

So, I would safeguard against it like this (NaN is a falsy value):

price = parseFloat(price) || 0;
qty = parseInt(qty, 10) || 0;

Arithmetic operations on numbers with the value NaN almost always result in NaN (NaN + 5 will result in NaN.) That means, if only one of the input cannot be parsed by parseFloat or parseInt, your current code would end up calculating NaN for the subtotal.

It's already been mentioned in the comments (by Felix mostly) but I think it's worth the emphasis as these are important concerns:

Always pass the radix argument to the parseInt function;
Do not use class for variable names: It's a reserved (not used, but reserved) keyword;
Don't expect the subtotal to be perfectly accurate unless you do your calculations in cents.

edited May 23 '17 at 12:33

Community

1
1

answered Aug 31 '11 at 23:55

Bryan Menard

13,234
4
31
47

2

It is not the case that `NaN + 5 === NaN` because `NaN` is the one value that is [not identical to itself](http://stackoverflow.com/questions/1565164/what-is-the-rationale-for-all-comparisons-returning-false-for-ieee754-nan-values). Maybe `isNaN(NaN + 5)` would be better. – Mike Samuel Sep 01 '11 at 00:39
You are absolutely right. Edited my answer accordingly. Thank you. – Bryan Menard Sep 01 '11 at 00:45
Thanks for the detailed answer .. Good one – Yaxita Shah Aug 18 '17 at 05:25

Javascript returning NaN

1 Answers1

Linked