...

View Full Version : Getting Values Through getElementByClass then Summing Them Up



liselnicole
03-23-2012, 07:22 PM
I'm new to js and have been going crazy trying to get this to work. I need the script to pull the values in the class selected, then spit out the sum of them. It can't be that hard! This is what I have and it just won't run. I'm working in a intra environment, so I'm not too worried about cross-browser compatibility. Any help would be appreciated. Thank you.

<html>
<head>
<script>
function findTheOddOnes() {
var theOddOnes = document.getElementsByClassName("odd");

for(var i=0; i<theOddOnes.length; i++){
sum += theOddOnes[i].textContent;
alert(sum);
}
}
</script>
</head>
<body>
<h1>getElementsByClassName Test</h1>
<p class="odd">1000</p>
<p>This is an even para.</p>
<p class="odd">1000</p>
<p>This one is not odd.</p>
<form>
<input type="button" value="Find the odd ones..." onclick="findTheOddOnes()">
</form>
</body>
</html>

xelawho
03-23-2012, 07:58 PM
you should learn to use a debugger.

you need to initialize the value of your sum variable (at zero is the obvious place).

you will also need to change your textContent from strings (which they are now) to numbers (so they can be added):



<script>
sum=0;
function findTheOddOnes() {
var theOddOnes = document.getElementsByClassName("odd");

for(var i=0; i<theOddOnes.length; i++){
sum += Number(theOddOnes[i].textContent);
alert(sum);
}
}
</script>

I know you don't care about cross-browser stuff, but it may be useful to keep in mind that getElementsByClassName has very patchy support.

liselnicole
03-23-2012, 08:13 PM
A debugger would probably be good. Thanks so much for your help. It is only outputting 1000 though, it should be 2000.

SamHuff
03-23-2012, 08:14 PM
IE does not support getElementsByClassName. that could be your problem. textContent also does not work in IE.

Old Pedant
03-23-2012, 09:51 PM
MSIE 9 supports both, but SamHuff is right about any older version of MSIE.

As for getting the wrong alert(): Both you and Xelawho put it in the WRONG PLACE! It must go *AFTER* the loop.

And Xelawho put the variable sum in the wrong place! It needs to be *INSIDE* the function.

SO:


function findTheOddOnes()
{
sum=0;
var theOddOnes = document.getElementsByClassName("odd");
for(var i=0; i<theOddOnes.length; i++)
{
sum += Number(theOddOnes[i].textContent);
}
alert(sum);
}


If you want this code to work in all browsers, it's not hard to change it:


function findTheOddOnes()
{
sum=0;
var paras = document.getElementsByTagName("p");
for(var i=0; i < paras.length; i++)
{
var p = paras[i];
if ( p.className == "odd" )
{
sum += Number( p.innerHTML );
}
}
alert(sum);
}

xelawho
03-24-2012, 12:37 AM
without wanting to be, er... pedantic...


Both you and Xelawho put it in the WRONG PLACE! It must go *AFTER* the loop.


not necessarily... it alerts as 1000 on the first loop and 2000 on the second. Depends if you want a running total or all in one hit at the end. Either way, when the loop ends you get an alert of 2000



And Xelawho put the variable sum in the wrong place! It needs to be *INSIDE* the function.

*if* you want it to be reset every time the function runs *and* you want it to remain local and not global. Otherwise it works fine.

but yeah - my answer was a little sloppy and Old Pedant's second code is obviously much better, just those "must" and "needs to be" are slightly misleading...

Old Pedant
03-24-2012, 12:45 AM
Welllllll....

I guess it depends on if you expect findTheOddOnes to be called more than once.

If not, doesn't matter where sum is initialized.

But if it might be called several times from several places, then the first time it is called the result will be 2000 (as the HTML was given). The second time it is called the sum will be 4000. Next time 6000. And so one. Seems pretty misleading to me.

So okay, maybe "must" for that is too strong. "Very likely" though, I would think.

Mishu
03-24-2012, 04:46 AM
MSIE 9 supports both, but SamHuff is right about any older version of MSIE.



Hello everyone.

You need to be aware that IE v9 needs a valid doctype at the top of the html before it will recognise document.getElementsByClassName(). Many newbies fall into the trap of not having a doctype.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum