Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    2
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Getting Values Through getElementByClass then Summing Them Up

    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>

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,916
    Thanks
    56
    Thanked 545 Times in 542 Posts
    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):

    Code:
    <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.

  • #3
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    2
    Thanks
    2
    Thanked 0 Times in 0 Posts
    A debugger would probably be good. Thanks so much for your help. It is only outputting 1000 though, it should be 2000.

  • #4
    New Coder
    Join Date
    Mar 2012
    Posts
    13
    Thanks
    0
    Thanked 1 Time in 1 Post
    IE does not support getElementsByClassName. that could be your problem. textContent also does not work in IE.

  • Users who have thanked SamHuff for this post:

    liselnicole (03-26-2012)

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,171
    Thanks
    75
    Thanked 4,339 Times in 4,305 Posts
    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:
    Code:
    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:
    Code:
    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);
    }
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    liselnicole (03-26-2012)

  • #6
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,916
    Thanks
    56
    Thanked 545 Times in 542 Posts
    without wanting to be, er... pedantic...

    Quote Originally Posted by Old Pedant View Post
    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

    Quote Originally Posted by Old Pedant View Post
    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...

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,171
    Thanks
    75
    Thanked 4,339 Times in 4,305 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #8
    Banned
    Join Date
    Mar 2012
    Posts
    306
    Thanks
    1
    Thanked 28 Times in 28 Posts
    Quote Originally Posted by Old Pedant View Post
    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.
    Last edited by Mishu; 03-24-2012 at 04:49 AM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •