CODEWITHSUNDEEP
javascriptjquery
user3232286
user3232286

Reputation:

Need javascript to calculate grade

I have following grade displayed dynamically

I want to calculate total grade after the data is loaded.

    <div class="grade" id="grade-1">70</div>
    <div class="grade" id="grade-2">90</div>
    <div class="grade" id="grade-3">80</div>
    <div class="grade" id="grade-4">60</div>
    <div class="grade" id="grade-5">90</div>
    <div class="grade" id="grade-6">80</div>
    <div class="grade" id="grade-7">80</div>
    <div class="grade" id="grade-8">60</div>
    <div class="grade" id="grade-9">90</div>
    .............
    .............

using javascript I want to calculate this total, number of grades are dynamic. help me out.

Upvotes: 1

Views: 1021

Answers (7)

Chase
Chase

Reputation: 29549

You can use javascripts reduce function as an alternative as well: 

var grades = document.querySelectorAll(".grade"),
    grades = Array.prototype.slice.call(grades);

var total = grades.reduce(function(previous, current, index, array){
    return parseInt(previous, 10) + parseInt(array[index].textContent, 10);
}, 0);

A few things of note here:

  • Since querySelectorAll returns a nodelist, we must use Array.prototype.slice to turn our results into a proper array.
  • Don't forget the radix on parseInt.
  • I've broken this all out for clarity and readability.
  • This is a pure javascript example, but is easily adaptable using jQuery.

Example: http://jsfiddle.net/BTvsL/

As pointed out in the comments, you could do something similar by combining map and reduce: 

var grades = document.querySelectorAll(".grade");
    grades = Array.prototype.slice.call(grades);

var total = grades.map(function(el){
    return parseInt(el.textContent, 10);
}).reduce(function(previous, current){
    return previous + current;
}, 0);

Example 2: http://jsfiddle.net/BTvsL/1/

Note: If you need to test between .innerHTML vs .innerText given your browser requirements, you can do so by testing for each and defaulting to 0 like so: 

var text = el.textContent || el.innerText || 0;

Upvotes: 2

Alnitak
Alnitak

Reputation: 339816

For browsers compatible with ES5 and the latest W3C specifications, you can get the sum all in one go:

var sum = $('div.grade').map(function() {
    return +this.textContent || 0;  // || 0 to cope with any NaNs
}).get().reduce(function(a, b) { return a + b }, 0);

i.e. get the elements, and the numeric value of their text content (compatible with IE9+), turn that into a native array and then use the ES5 standard function Array.prototype.reduce to calculate the sum of those values.

Upvotes: 0

Reigel Gallarde
Reigel Gallarde

Reputation: 65264

another way to do is to use jQuery .map() and javascript .reduce()

var total = $('.grade').map(function(){
        return $(this).text()*1; // to make sure this is a number 
    }).get().reduce(function(a, b) {
        return a + b;
    });
alert(total);

demo

Upvotes: 0

Milind Anantwar
Milind Anantwar

Reputation: 82241

You can use .each() to loop through all elements :

 var gradesum=0;
 $('.grade').each(function(){gradesum+= parseInt($(this).text());});
 alert(gradesum);

Working Demo

Upvotes: 2

Balachandran
Balachandran

Reputation: 9637

Demo

you can select the all element which is having .grade class .and sum the text

var total=0;
    $(".grade").each(function(){

       total+= +$(this).text();

    });
    alert(total);

Upvotes: 1

Gal Ziv
Gal Ziv

Reputation: 7372

var total = 0;

$("div.grade").each(function() { total += parseFloat($(this).html()); } );

Upvotes: 1

MitulP91
MitulP91

Reputation: 1325

You can do the following:

var total_grade = 0;

$('.grade').each(function() {
    total_grade += parseInt($(this).text());
});

console.log(total_grade);

Hope this helps.

Upvotes: 2

Related Questions