-4

Possible Duplicate:
How is floating point stored? When does it matter?

Here is an example with 3 options and 2 different problems. http://jsfiddle.net/pEpFA/7/

  1. option 1 - ground / displays properly.
  2. option 2 - express / omits the '0' from the value
  3. option 3 - overnight / add's 000000000000000 to the total.

How do i get this to work properly? I want the outcome to be displayed like option 1. Is this a javaScript bug?

HTML

<label><input type="radio" name="print" class="option" data-number="25.72" /> UPS Ground </label>
<br>
<label><input type="radio" name="print" class="option" data-number="80.90" /> UPS Express </label>
<br>
<label><input type="radio" name="print" class="option" data-number="112.93" /> UPS Overnight </label>

<br><br>
Shipping
$<span id="ship_total"></span>

<br>
Final Total
$<span id="new_total"></span>

jQuery

$(document).ready(function() {
      $('label').click(function() {
         var total = 0;

          $('.option:checked').each(function() {
              total += Number($(this).data('number'));   
          });
              $('#ship_total').text(total);

                  //php echos the subtotal
                 var sub_total = 550.25;

                 var ship_total = ($("#ship_total").text());

                var final_total = parseFloat(sub_total) + parseFloat(ship_total);

        $('#new_total').text(final_total);
    });

    });

See jsfiddle DEMO: http://jsfiddle.net/pEpFA/7/

Community
  • 1
  • 1
MrPizzaFace
  • 7,807
  • 15
  • 79
  • 123
  • What exactly is/are the problems. – Konstantin Dinev Oct 08 '12 at 18:49
  • The problems are explained in the first 3 sentences. Did you downvote me? – MrPizzaFace Oct 08 '12 at 18:50
  • 1
    Javascript can add just fine... – sachleen Oct 08 '12 at 18:50
  • Ok see my demo for clarification .. Why the downvotes? – MrPizzaFace Oct 08 '12 at 18:51
  • 1
    Because there's nothing wrong with the math. The problem is displaying numbers with certain number of decimal places. – sachleen Oct 08 '12 at 18:52
  • http://stackoverflow.com/questions/56947/how-is-floating-point-stored-when-does-it-matter – bfavaretto Oct 08 '12 at 18:52
  • @sachleen: Don't forget that [JavaScript's math is broken](http://stackoverflow.com/q/588004/1048572) (because it is floating-point-artithmetik); However this does not seem to be an issue here – Bergi Oct 08 '12 at 18:53
  • @fabio: Could you explain the error at option #3? It just displays fine. – Bergi Oct 08 '12 at 18:55
  • IMHO the downvotes were not just in this case. I described my problem clearly in a numbered list. Provided all code. and a Demo for easy tweaking/testing – MrPizzaFace Oct 08 '12 at 18:55
  • @bergi #3 was corrected by marcelo it was showing the final total as `$663.000000000000018` – MrPizzaFace Oct 08 '12 at 18:56
  • 1
    #2 is because trailing zeros are ignored after the decimal point, you have to use `.toFixed()`; #3 is because floating-point math is not precise (see the link I added above). – bfavaretto Oct 08 '12 at 18:59
  • As for the downvotes: I think that's because floats just work like that (and that's in all languages, not only js), and that's very well documented. I voted to close as duplicate (but didn't downvote, for the record). – bfavaretto Oct 08 '12 at 19:02
  • @Bergi #3 is because of floating-point math. – bfavaretto Oct 08 '12 at 19:02
  • @bfavaretto I was not aware of the float issue. I was perplexed at how it worked correctly in 1 instance and not in the others. Thank you for your input. I'm sure less experienced people can learn from this question. – MrPizzaFace Oct 08 '12 at 19:04
  • *related:* [Precise Financial Calculation in JavaScript. What Are the Gotchas?](http://stackoverflow.com/questions/2876536/precise-financial-calculation-in-javascript-what-are-the-gotchas). – Felix Kling Oct 08 '12 at 19:08

2 Answers2

2

Have you tried the following

final_total.toFixed(Number);
scusyxx
  • 1,226
  • 1
  • 8
  • 9
  • @fabio yes it does... you don't even use it in your demo. – sachleen Oct 08 '12 at 18:53
  • Are you sure? I just tested and it worked... final_total.toFixed(2); – scusyxx Oct 08 '12 at 18:53
  • I was about to post an answer, and two more came up!! I wrapped the full function like this: var final_total = (parseFloat(sub_total) + parseFloat(ship_total)).toFixed(2); Here's a jsfiddle of it: http://jsfiddle.net/pEpFA/10/ – sksallaj Oct 08 '12 at 18:58
2

http://jsfiddle.net/pEpFA/9/ (Updated all values)

Pay attention to those lines below in the fiddle above:

 total = total.toFixed(2);
 ...
 final_total = final_total.toFixed(2);
Marcelo Assis
  • 5,136
  • 3
  • 33
  • 54