CODEWITHSUNDEEP
domjquery
Iain Simpson
Iain Simpson

Reputation: 8121

jQuery addition function giving me NaN

I am using the following function to add all of my line totals together. Each of the totals will be a decimal number such as 23.45 . When the user enters any qty into any of text input boxes it should fire the function, but all I'm getting at the moment in grandtotal is NaN, who's nan is it and why is she messing with my script?

By the way, each of the linetotals is a span, which is filled with the line total calculation once a quantity is entered into the qty text box.

So basically, user comes along, selects a price from the line one drop down, so lets say 20.00 , they then enter the quantity into the text box qty, let's say 2, jQuery then multiplies qty by priceeach and output into the span with the id linetotal1. What I want to do is add all of the linetotals together for a grand total, but lets say if they don't enter anything into line 2, linetotal2, 3, 4, 5 will them be empty.

  <script>
   $(document).ready(function () {
      $('input').on('keyup', function () {
           linetotal1 =  $('#linetotal1').text(),
            linetotal2 =  $('#linetotal2').text(),
             linetotal3 =  $('#linetotal3').text(),
              linetotal4 =  $('#linetotal4').text(),
               linetotal5 =  $('#linetotal5').text(),
    grandtotal = parseFloat(linetotal1) + parseFloat(linetotal2) + parseFloat(linetotal3) +     parseFloat(linetotal4) + parseFloat(linetotal5);
    $('#grandtotal').text(grandtotal);
       });  });
   </script>

Upvotes: 0

Views: 809

Answers (2)

MrCode
MrCode

Reputation: 64526

You could just loop from 1-5, and have the value default to 0 if it's a blank string:

var rawValue, grandtotal = 0;

for(var i=1; i<6; i++)
{
     rawValue = $.trim($('#linetotal' + i).text());
     if(rawValue == '') rawValue = 0;
     grandtotal += parseFloat(rawValue);
}

$('#grandtotal').text(grandtotal);

jsFiddle Demo

If you wanted to do something a bit fancier with jQuery you could select each of the spans based on the ID starting with linetotal. This would work if you added more spans, where as with the for loop, you'd have to update the count. It would be better if the spans all had a common class, which you could use to easily select them.

var rawValue, grandtotal = 0;

$('span[id^="linetotal"]').each(function(i, elem){
     rawValue = $.trim($(this).text());
     if(rawValue == '') rawValue = 0;
     grandtotal += parseFloat(rawValue);
});

$('#grandtotal').text(grandtotal);

jsFiddle Demo

Upvotes: 1

Raza
Raza

Reputation: 1105

You should do this by loop, i have done this before for my client check if my code helps you 

    var disValue = new Array();
    var this_size = document.getElementsByName("myVal").length;
    sum = 0;
    for (i=0; i<this_size; i++)
    {
          disValue[i] = document.getElementsByName("myVal")[i].value;
    }

    for (i=0; i<this_size; i++)
    {
        sum = parseFloat(sum)+ parseFloat(disValue[i]);
    }

 if (sum != 0) {
document.getElementById("disc_test").innerHTML="<?php echo $this->__('You are saving') ?> "+sum +" <?php echo $this->__('on this order') ?>!";
 }

ignore php tags :)

Upvotes: 0

Related Questions