CODEWITHSUNDEEP
javascriptjquery
user2650277
user2650277

Reputation: 6739

Sum with jquery not working

I have a lot of labels as shown on a page. I want to sum the values and store them in final_cpa.

HTML :

<label class="tmpcpa">32.1</label>

JS :

function calculate_final_cpa() {
        var final_cpa = 0;
        var allfilled = false;
        $('.tmpcpa').each(function () {
            if ($(this).val() != 0) {
            final_cpa += parseInt($(this).text()) || 0;
            allfilled = true;
            } else {
                allfilled = false;
            }
        });
             console.log(final_cpa); 
             console.log(allfilled);
    }

    var run = setInterval(calculate_final_cpa, 500);

However final_cpa is always 0 and allfilled remains false.

Upvotes: 0

Views: 300

Answers (6)

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

That because label don't have a value attribute so the .val() function will always return an empty string, you have to use .text() instead to get the text content inside the label element :

if ($(this).val() != 0) {

Should be : 

if ($(this).text() != 0) {

NOTE : as Rayon mentioned in the comment below text() will always return string so better to change the zero in condition to string '0'.

Hope this helps.

function calculate_final_cpa() {
  var final_cpa = 0;
  var allfilled = false;

  $('.tmpcpa').each(function () { 
    if ($(this).text() != '0') {
      final_cpa += parseInt($(this).text()) || 0;
      allfilled = true;
    } else {
      allfilled = false;
    }
  });
  console.log(final_cpa); 
  console.log(allfilled);
}

calculate_final_cpa();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="tmpcpa">32.1</label>

Upvotes: 3

Rayon
Rayon

Reputation: 36609

  • Test it with .text instead of val() as label has no value property
  • Use Unary plus(+)/Number operator instead of parseInt as parseInt will ignore floating point
  • Use length of lable-elements to test whether all the label has values !== 0

function calculate_final_cpa() {
  var final_cpa = 0;
  var countOfFilled = 0;
  $('.tmpcpa').each(function() {
    if ($(this).text() !== '0') {
      final_cpa += +($(this).text()) || 0;
      ++countOfFilled;
    }
  });
  console.log('Total:  ' + final_cpa);
  console.log('All filled  ' + $('.tmpcpa').length === countOfFilled);
}

calculate_final_cpa();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<label class="tmpcpa">32.1</label>
<label class="tmpcpa">32.1</label>
<label class="tmpcpa">0</label>

Upvotes: 0

eisbehr
eisbehr

Reputation: 12452

Beside your code had an error, you should check the content of the table before parsing them. And because you use decimals in your example, you should switch from parseInt to parseFloat too.

And your allfilled varibale makes no sense, because if the last element of .tmpcpa was empty, it will be false again. So i removed it.

function calculate_final_cpa() {
    var final_cpa = 0;

    $('.tmpcpa').each(function () {
        var content = $(this).text();
        final_cpa += IsNumeric(content) ? parseFloat(content) : 0;
    });

    console.log(final_cpa); 
}

Upvotes: 0

Devanshu Madan
Devanshu Madan

Reputation: 51

Change 

if ($(this).val() != 0)

to 

if (parseInt($(this).text()) != 0)

Upvotes: 0

Mohit Bhardwaj
Mohit Bhardwaj

Reputation: 10083

First thing, you need to use .text() instead of .val() to get the text inside a label. Also, if you are expecting your result to contain decimal digits, you need to use parseFloat(): 

function calculate_final_cpa() {
        var final_cpa = 0;
        var allfilled = false;
        $('.tmpcpa').each(function () {
            if ($(this).text() != 0) {
            final_cpa += parseFloat($(this).text()) || 0;
            allfilled = true;
            } else {
                allfilled = false;
            }
        });
        console.log(final_cpa); 
        console.log(allfilled);
}

calculate_final_cpa();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<label class="tmpcpa">32.1</label>
<br />
<label class="tmpcpa">32.1</label>

Upvotes: 0

Dhara Parmar
Dhara Parmar

Reputation: 8101

Check $(this).text() != "" instead of $(this).val() != 0 as You can not use .val() for getting label text. .text() will give you text of label

if ($(this).text() != "" && $(this).text() != "0") { 
....
}

Upvotes: 1

Related Questions