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);
});

Answer 1

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.