Calculation with parseFloat looses decimal places

Question

I need to calculate a few numbers. It works ok so far, BUT it looses the original decimal places (here: 50 cent). Any idea why this is happening?

$("select").on("change", function () {
  var sum1 = parseFloat($(this).val()) * parseFloat($(this).data("price"));
  var sum2 = parseFloat($("#orgPrice").data("price"));
  var sum3 = parseFloat(sum1) + parseFloat(sum2);
  $("#total").text(sum3.toFixed(2));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="orgPrice" data-price="100,00"></div>

<select id="subcode_060" class="custom-select custom-select-sm" data-description="UPGRADES" data-subdescription="X to Y" data-price="3560,50">
  <option value="0" selected>0</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>

<div id="total">0.00</div>

Use dot `.` instead of comma `,` `3560.50` – Muhammet Can TONBUL Mar 06 '18 at 14:42 — Muhammet Can TONBUL, Mar 06 '18 at 14:42
Yes, that hint helped me out, thank you!! – JonSnow Mar 07 '18 at 21:42 — JonSnow, Mar 07 '18 at 21:42

score 3 · Accepted Answer · answered Mar 06 '18 at 14:41

You have to use a . and not a , See the only change only happend here, from

data-price="3560,50"

to

data-price="3560.50"

$("select").on("change", function () {

  var sum1 = parseFloat($(this).val()) * parseFloat($(this).data("price"));
  var sum2 = parseFloat($("#orgPrice").data("price"));
  var sum3 = parseFloat(sum1) + parseFloat(sum2);

  $("#total").text(sum3.toFixed(2));

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="orgPrice" data-price="100,00"></div>
 
 <select id="subcode_060" class="custom-select custom-select-sm" data-description="UPGRADES" data-subdescription="X to Y" data-price="3560.50">
   <option value="0" selected>0</option>
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
   <option value="4">4</option>
   <option value="5">5</option>
</select>

<div id="total">0.00</div>

Note: Of course you also want to change data-price="100,00" to data-price="100.00" it just doesn't really effect anything cause it's .00

score 1 · Answer 2 · answered Mar 06 '18 at 14:42

1

You need to use . instead of , for the decimal separator in data-price.

data-price="3560.50"

Here's the updated fiddle?: https://jsfiddle.net/ub4j7d7z/3/

answered Mar 06 '18 at 14:42

spawnedc

476
5
9

Calculation with parseFloat looses decimal places

2 Answers2