Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Javascript addition calculator part 2

Posted on 2009-02-19
14
Medium Priority
?
187 Views
Last Modified: 2012-05-06
continued from:http://www.experts-exchange.com/Programming/Languages/Scripting/Q_24156965.html#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

0
Comment
Question by:turtleman2009
  • 7
  • 7
14 Comments
 
LVL 41

Expert Comment

by:HonorGod
ID: 23683585
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?
0
 

Author Comment

by:turtleman2009
ID: 23683628
This is all I want:

<div class="gift2009">
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 23683857
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

0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 41

Expert Comment

by:HonorGod
ID: 23683886
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

0
 
LVL 41

Expert Comment

by:HonorGod
ID: 23683912
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

0
 

Author Comment

by:turtleman2009
ID: 23683924
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.

0
 

Author Comment

by:turtleman2009
ID: 23684066
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
0
 

Author Comment

by:turtleman2009
ID: 23684130
Am I making sense?
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 23684322
But <tmpl_var gift_date> is not a variable. It is a string.
From where is this value supposed to be obtained?
0
 

Author Comment

by:turtleman2009
ID: 23684405
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>.
0
 

Author Comment

by:turtleman2009
ID: 23685130
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.
0
 
LVL 41

Accepted Solution

by:
HonorGod earned 2000 total points
ID: 23686705
This is using the HTML::Template Perl module attatched to my CMS.
Ah!  So that's what it is!  I am not familiar with that, so please forgive my ignorance.

Q: Is there anyway of troubleshooting this?
A: Absolutely.  :-)

Q: What Perl script do you use to create your HTML?

Q: Can you upload the output of this script for me to look at?

0
 

Author Closing Comment

by:turtleman2009
ID: 31548838
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
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 23687626
Wow, that's a pleasant surprise!  Thanks for the grade & points

Good luck & have a great day
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

581 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question