Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Javascript returning NaN

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);
});
like image 258
csm232s Avatar asked Aug 31 '11 23:08

csm232s


1 Answers

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.
like image 109
Bryan Menard Avatar answered Sep 22 '22 07:09

Bryan Menard