Solved

how to accumulate a decimal total in jQuery / Javascript

Posted on 2013-02-04
6
722 Views
Last Modified: 2013-02-04
 $('span[id*="lblAmt"]').each(function () {
            $(this).css(
               'border', 'solid 1px green'
            );

            tot += $(this).text();
        });


alert(tot);

Open in new window



I've established that it loops the appropriate number of times inside the each( ).


But the total in the ALERT is wacky.


Do I need to convert the text( ) to a decimal or something or other?


How can I accumlate values like this inside the each:

415.66
434
320.17
.17


Thank you.


Please provide working javascript.
0
Comment
Question by:knowlton
  • 3
  • 2
6 Comments
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 38853258
what about :
var tot = 0;
 $('span[id*="lblAmt"]').each(function () {
            $(this).css(
               'border', 'solid 1px green'
            );

            tot += $(this).text() * 1; // or tot += parseFloat( $(this).text() )
        });


alert(tot);

Open in new window

0
 
LVL 5

Author Comment

by:knowlton
ID: 38853268
Yeah...it was parseFloat that I needed, I think!

  $('span[id*="lblAmt"]').each(function () {           
            tot += parseFloat($(this).text());
        });

Open in new window


alert(tot);
0
 
LVL 5

Author Closing Comment

by:knowlton
ID: 38853271
Thank you.
0
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
LVL 18

Expert Comment

by:Matthew Kelly
ID: 38853272
Here is a test script that works with your example data of strings.

Essentially we use a variety of built in Javascript functions and we are sure to initialize tot to 0:
parseFloat: http://www.w3schools.com/jsref/jsref_parsefloat.asp
Math.Round: http://www.w3schools.com/jsref/jsref_round.asp

<script type="text/javascript">
//initialize tot to 0
var tot = 0;
// array of string values
var values=new Array("415.66","434","320.17",".17");
//loop through with parseFloat
for (var i=0;i<values.length;i++)
{ 
tot += parseFloat(values[i]);
}
// round to two decimal places
tot = Math.round(tot*100)/100;
//output tot, use .toFixed(2) if you want two decimal places to always show
alert(tot);
</script>

Open in new window


So for your code:

//initialize
var tot = 0;

$('span[id*="lblAmt"]').each(function () {
            $(this).css(
               'border', 'solid 1px green'
            );
            //parseFloat
            tot += parseFloat($(this).text());
        });

// round to two decimal places, use 1000 for 3 decimal places, etc. You must do this because of float values extreme decimal places.
tot = Math.round(tot*100)/100;

//output
alert(tot);

Open in new window

0
 
LVL 82

Expert Comment

by:leakim971
ID: 38853274
longer than * 1 but more explicit too...
0
 
LVL 5

Author Comment

by:knowlton
ID: 38853300
matthewstevenkelly:


Thank you for this additional info!

Tom
0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

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

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
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…

911 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

Need Help in Real-Time?

Connect with top rated Experts

24 Experts available now in Live!

Get 1:1 Help Now