Pulling class elements into an array and then summing them up

Question

I'm extremely new to Javascript and I need some help to do this. The classes will be pulling from different tables (like below). I just need a way to pull all the cell values out of each class and sum them up. So classone = 1234 + 1234. I'm confused as to whether document.getElementByClassName works? Any help would be appreciated.

<table>
<tbody>
   <tr><td class="classone">1234</td></tr>
   <tr><td class="classtwo">1234</td></tr>
   <tr><td class="classthree">1234</td></tr>
</tbody>
</table>


<table>
<tbody>
   <tr><td class="classone">1234</td></tr>
   <tr><td class="classtwo">1234</td></tr>
   <tr><td class="classthree">1234</td></tr>
</tbody>
</table>

Are you using bare javascript, or with the help of something like jquery? — Marc B, Mar 22 '12 at 15:02

score 0 · Answer 1 · edited May 23 '17 at 12:04

document.getElementsByClassName works except in IE (8 and below).

function sumByClass(classname){
    var els = document.getElementsByClassName(classname);
    var i, sum = 0;

    for(i = els.length; i--;)
        sum += parseInt(els[i].innerText || els.textContent, 10)

    return sum;
}

For IE8 support you can use querySelectorAll:

function sumByClass(classname){
    var els;
    var i, sum = 0;

    if(document.getElementsByClassName) // Modern
        els = document.getElementsByClassName(classname);
    else if(document.querySelectorAll) // IE 8
        els = document.querySelectorAll((' ' + classname).replace(/ +/g, '.'));

    for(i = els.length; i--;)
        sum += parseInt(els[i].innerText || els.textContent, 10)

    return sum;
}

JSFiddle

JSFiddle (With IE8 support)

For IE 7 and 6 you can take a look at my answer here to define a function which gets elements by class name, returning a NodeList in IE8+, but an array in IE 7 and below. For a cross-browser solution you can just use that list/array to sum the values the same way I do above:

function sumByClass(classname){
    var els = GEBCN(classname);
    var i, sum = 0;

    for(i = els.length; i--;)
        sum += parseInt(els[i].innerText || els.textContent, 10)

    return sum;
}

Of course you could always use a framework/library such as jQuery make this much simpler as well.

inspile · Answer 2 · 2012-03-22T16:28:15.663

0

If you are new to JavaScript, I would take a look at jQuery JavaScript Library. You have to add it to your all of your html pages using:

<script type="text/javascript" https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js

This solution uses it and works in all modern browsers as well as far back as IE 6.

function addByClass(classname) {
    var sum = 0;
    $.each($(' ' + classname).replace(/ +/g, '.'), function(i, item) {
        sum += parseInt($(item).html());
    });
    return sum;
}

http://jsfiddle.net/BwmZb/2/

edited Mar 22 '12 at 16:28

answered Mar 22 '12 at 15:20

inspile

35
6

That doesn't work if class name has multiple classes like `addByClass('classone classtwo') != 4936`. Otherwise it works fine, but if needed for multiple classes the way `getElementsByClassName` works you can just change `"." + classname` to `(' ' + classname).replace(/ +/g, '.')` to make it so `addByClass('classone classtwo') == 4936` – Paul Mar 22 '12 at 16:07
So does the script line go in the head of the page? – user1286227 Mar 22 '12 at 16:27
yes, and make sure it goes about any other JavaScript line so that you can use it in other external JavaScript files you link to. – inspile Mar 22 '12 at 16:28

Pulling class elements into an array and then summing them up

2 Answers2