Link to home
Start Free TrialLog in
Avatar of turtleman2009
turtleman2009

asked on

Javascript addition calculator part 2

continued from:https://www.experts-exchange.com/questions/24156965/Javascript-simple-addition-calculator.html?anchorAnswerId=23682729#a23682729

I can't get this code to work on my server.


<tmpl_var gift_date> produces variable like 01/01/2009 I need it to be converted to the class gift2009

The code does work on my local machine if i convert <tmpl_var gift_date> to 01/01/2009. Also if i were to just hard code a class it does work on the server but that would give all the years the same class and I only need the 1 year to be added and totaled seperately
<html>
<head>
<script type='text/javascript'>
  //--------------------------------------------------------------------
  //  Name: getElementsByClass()
  //  Role: Provide very useful getElementByClass functionality
  //  From: http://www.dustindiaz.com/getelementsbyclass
  // Parms: searchClass == className to be matched   [Required]
  //        node        == Starting point for search [Optional]
  //        tag         == tag names to be searched  [Optional]
  //--------------------------------------------------------------------
  function getElementsByClass( searchClass, node, tag ) {
    var classElements = new Array();
    if ( node == null )
      node = document;
    if ( tag  == null )
      tag = '*';
    var els = node.getElementsByTagName( tag );
    var elsLen = els.length;
    var pattern = new RegExp( "(^|\\s)"+searchClass+"(\\s|$)" );
    for ( var i = 0, j = 0; i < elsLen; ++i ) {
      if ( pattern.test( els[ i ].className ) ) {
        classElements[ j ] = els[ i ];
        j++;
      }
    }
    return classElements;
  }
 
  function addAll(){
    var gifts = getElementsByClass( 'gift2009' )
    if ( gifts ) {
      var total = getElementsByClass( 'total' )[ 0 ]
      var sum = 0.0
      if ( total ) {
        for ( var g = 0; g < gifts.length; g++ ) {
          var child = gifts[ g ].firstChild
          if ( child && child.nodeName == '#text' ) {
            sum += parseFloat( child.nodeValue )
          }
        }
        child = total.firstChild
        if ( child && child.nodeName == '#text' ) {
          child.nodeValue = sum.toFixed( 2 )
        } else {
          total.appendChild( document.createTextNode( sum.toFixed( 2 ) ) )
        }
      } else {
        alert( 'No elements with class="total" found.' )
      }
    } else {
      alert( 'No elements with class="gift" found.' )
    }
  }
</script>
</head>
<body onload='addAll()'>
 <script type="text/javascript"> 
var str ="<tmpl_var gift_date>"; 
var newStr = str.substring(6);
var newCStr = str.substring(6);
var div = 'gift' + newStr;
var cls = 'gift' + newCStr;
 
document.write("<div id=\"" + div + "\" class=\"" + cls + "\" >");
</script>
            33.33
        </div>
		
		<script type="text/javascript"> 
var str ="<tmpl_var gift_date>"; 
var newStr = str.substring(6);
var newCStr = str.substring(6);
var div = 'gift' + newStr;
var cls = 'gift' + newCStr;
 
document.write("<div id=\"" + div + "\" class=\"" + cls + "\" >");
</script>
           11.12
         
        </div>
		
  <div class='total'></div>
</body>
</html>

Open in new window

Avatar of HonorGod
HonorGod
Flag of United States of America image

This code:
--------------------------------------------------------------------------------
 <script type="text/javascript">
var str ="<tmpl_var gift_date>";
var newStr = str.substring(6);
var newCStr = str.substring(6);
var div = 'gift' + newStr;
var cls = 'gift' + newCStr;
alert( 'div == <div id="' + div + '" class="' + cls + '" >' )
document.write("<div id=\"" + div + "\" class=\"" + cls + "\" >");
</script>
--------------------------------------------------------------------------------
generates an invalid <div...> tag.

Take a look at what is in the alert dialog box...

What would you expect/hope the div to look like?
Avatar of turtleman2009
turtleman2009

ASKER

This is all I want:

<div class="gift2009">
From where would the "gift2009" come?

If it's something that can be "hard coded", why no just write it?

document.write( '<div id="gift2009" class="gift2009" >' )

Open in new window

Or, better yet, something like this...


I'm confused. :-)
<body onload='addAll()'>
  <div id="gift2009" class="gift2009">33.33</div>
  <div id="gift2009" class="gift2009">11.12</div>
  <div class='total'></div>
</body>

Open in new window

You could even add a parameter to addAll()...

Then the "body" tag would look like:

<body onload='addAdd("gift2009")'>
  function addAll( className ){
    var gifts = getElementsByClass( className )
    if ( gifts ) {
      var total = getElementsByClass( 'total' )[ 0 ]
      var sum = 0.0
      if ( total ) {
        for ( var g = 0; g < gifts.length; g++ ) {
          var child = gifts[ g ].firstChild
          if ( child && child.nodeName == '#text' ) {
            sum += parseFloat( child.nodeValue )
          }
        }
        child = total.firstChild
        if ( child && child.nodeName == '#text' ) {
          child.nodeValue = sum.toFixed( 2 )
        } else {
          total.appendChild( document.createTextNode( sum.toFixed( 2 ) ) )
        }
      } else {
        alert( 'No elements with class="total" found.' )
      }
    } else {
      alert( 'No elements with class="gift" found.' )
    }
  }

Open in new window

If I hard code the class then all the years will have the same class so instead of just telling me how much someone gave in 2009 it would add up the persons complete giving history.

So I am using your javascript to pick and choose which years to add up, but to do this I have to make sure that all the years have different classes.

the only way for me to make sure that the donations gave in 2009 are equipped with class="gift2009" and year 2008 equipped with class="gift2008" is to use the <tmpl_var gift_date> variable and get it converted to the class of the year
Am I making sense?
But <tmpl_var gift_date> is not a variable. It is a string.
From where is this value supposed to be obtained?
This is using the HTML::Template Perl module attatched to my CMS. So when I write the string <tmpl_var gift_date> it gives me the date from the database which i dont have access to. Likewise for the value of each gift all I have to put is<tmpl_var gift_amount>.
Here is what I absolutely now know:

I know that my replace character script is creating the desired class.

The combination of the addition script and the replace character script do  work together.

Both scripts work with the <tmpl_var gift_date> string

When both scripts and the string are all put together the replace character script works but the addition script does not.

Is there anyway of troubleshooting this or is this a hopeless cause. I have to get this to work but I don't know what other rout to take.
ASKER CERTIFIED SOLUTION
Avatar of HonorGod
HonorGod
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
I have no clue what I did but it works! It wasn't working and I was making sure the code was clean before i posted it in here, and then bam, it worked! Thank you for your patience, and for the code this morning.
God Bless you
Wow, that's a pleasant surprise!  Thanks for the grade & points

Good luck & have a great day