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 6 of 6
  1. #1
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Adding Up Numbers In Spans

    Hi, on a page where there will be a series of different prices, I would like to have a total at the bottom.

    Each price is in a span with the id 're', and the total is in a span with the id 'to'. I could use text boxes, but I wanted spans to fit in with the page better.

    I'm guessing it'll have to loop through every 're' it finds, then place the result into the 'to' span, on body onload. Not really quite sure how to do it myself though...

  • #2
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    I think I'd go about it something like this, if I was using span tags

    PHP Code:
    <HTML>
    <
    HEAD>
    <
    TITLE>Document Title</TITLE>

    <
    script type="text/javascript">
    <!--

    price=new Array("5.00","2.50","3.00","4.10","1.53")
    total=0

    function addme(){

    for(
    i=0;i<price.length;i++){
    document.getElementById("re"+i).innerHTML=price[i]
    }

    for(
    j=0;j<price.length;j++){
    total+=price[j]*1
    }

    document.getElementById("to").innerHTML=total
    }
    //-->
    </script>
    </HEAD>
    <BODY onload="addme()">

    Item 1 = <span id="re0"></span><BR>
    Item 2 = <span id="re1"></span><BR>
    Item 3 = <span id="re2"></span><BR>
    Item 4 = <span id="re3"></span><BR>
    Item 5 = <span id="re4"></span><BR>
    <BR>
    Total = <span id="to"></span><BR>

    </BODY>
    </HTML> 
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #3
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    can be shorten and can be done a little more dynamic:
    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
    <
    html>
    <
    head>
    <
    title>Untitled Document</title>
    <
    meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <
    meta http-equiv="Content-Style-Type" content="text/css">
    <
    meta http-equiv="Content-Script-Type" content="text/javascript">
    <
    script type="text/javascript"
    var 
    price=[5.00,2.50,3.00,4.10,1.53];
    onload = function(){
    var 
    total=0;
    for(
    i=0;i<price.length;i++){
    document.getElementById('it').getElementsByTagName('span')[i].firstChild.data=price[i];
    total+=price[i];
    }
    document.getElementById('to').firstChild.data=total;

    </script>
    </head>
    <body>
    <span id="it">
    Item 1 = <span>&nbsp;</span><br>
    Item 2 = <span>&nbsp;</span><br>
    Item 3 = <span>&nbsp;</span><br>
    Item 4 = <span>&nbsp;</span><br>
    Item 5 = <span>&nbsp;</span><br><br>
    </span>
    Total = <span id="to">&nbsp;</span><br>
    </body>
    </html> 
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #4
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the replies guys, but it's not really quite what I want...

    I don't really want the Javascript to place the prices in really - just loop through each price span, adding up the numbers, then place the result into the total span... is that possible?

  • #5
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Code:
    function calculate(){
      var total=0;
      var spans = document.getElementById("items").getElementsByTagName('span');
      var len = spans.length;
      for (var i=0; i<len; i++){
         total += Number(spans[i].innerHTML);
      }
      document.getElementById("total").innerHTML=total.toFixed(2); //you may use toDecimals() in JS FAQ as toFixed() is not supported or buggy in some browsers
    }
    window.onload = calculate;
    ...
    <div id="items">
    Item 1 = <span>2.00</span>
    Item 2 = <span>30.50</span>
    Item 3 = <span>10.00</span>
    Item 4 = <span>100.50</span>
    Item 5 = <span>50.50</span>
    </div>
    Total = <span id="total"></span>
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #6
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks! Works great!


  •  

    Posting Permissions

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