parseFloat Doesn't Give Exact Value

Question

I am working on a project which is require 'tip box' calculation system. As you see in the code snippet, it doesn't work as I expected. How can I solve this problem?

$("select[name='tip']").on('change',function(){
    var thiz = $(this);
    var content_credit = parseFloat($("#f_content_credit").text());
    var total_balance = parseFloat($("#f_total_balance").text());
    var tip = parseFloat(thiz.val());

    console.log(total_balance+"-"+content_credit+"-"+tip);
    
    $("#f_after_confirm").text(total_balance-content_credit-tip);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered table-hover">
    <tbody>
      <tr>
            <td> <strong>Total Balance</strong> </td>
            <td id='f_total_balance'> 45.67 </td>
        </tr>
      <tr>
            <td> <strong>Credit</strong> </td>
            <td id='f_content_credit'> 10.20 </td>
        </tr>
        <tr>
            <td> <strong>TIP BOX</strong></td>
            <td> 
                <select name="tip" class='form-control'>
                    <option value="0" selected>0 Kredi</option>
                    <option value="0.10">0.1 credit</option>
                    <option value="0.20">0.2 credit | not working</option>
                    <option value="0.30">0.3 credit</option>
                    <option value="0.80">0.8 credit</option>
                    <option value="1.20">1.2 credit | not working</option>
                </select>
            </td>
        </tr>
        <tr>
            <td> <strong>After Confirm Calculation</strong> <br><small>Total Balance - Credit - Tip</small> </td>
            <td id='f_after_confirm'> 35.47 </td>
        </tr>
    </tbody>
</table>

This can help you http://stackoverflow.com/questions/588004/is-floating-point-math-broken — Alexis, Nov 09 '16 at 09:15
Welcome to the world of floating point maths! Note that `parseFloat()` is a native JS method. It has nothing at all to do with jQuery — Rory McCrossan, Nov 09 '16 at 09:16
Looks like [`toFixed`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed) is the best option for you, as it's well suited for currency figures. — MaxArt, Nov 09 '16 at 09:17
@Alexis I wouldn't say it's technically a dupe as OP is asking 'How can I fix this', not 'Why does it happen' — Rory McCrossan, Nov 09 '16 at 09:19
@RoryMcCrossan You're right, don't know then. Problem is the same, but not same question. — Alexis, Nov 09 '16 at 09:22

Bharat · Accepted Answer · 2016-11-09T09:24:22.993

try like this, use toFixed() for decimal point.

$("select[name='tip']").on('change',function(){
    var thiz = $(this);
    var content_credit = parseFloat($("#f_content_credit").text()).toFixed(2);
    var total_balance = parseFloat($("#f_total_balance").text()).toFixed(2);
    var tip = parseFloat(thiz.val()).toFixed(2);

    console.log(total_balance+"-"+content_credit+"-"+tip);
    
    $("#f_after_confirm").text(parseFloat(total_balance-content_credit-tip).toFixed(2));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered table-hover">
    <tbody>
      <tr>
            <td> <strong>Total Balance</strong> </td>
            <td id='f_total_balance'> 45.67 </td>
        </tr>
      <tr>
            <td> <strong>Credit</strong> </td>
            <td id='f_content_credit'> 10.20 </td>
        </tr>
        <tr>
            <td> <strong>TIP BOX</strong></td>
            <td> 
                <select name="tip" class='form-control'>
                    <option value="0" selected>0 Kredi</option>
                    <option value="0.10">0.1 credit</option>
                    <option value="0.20">0.2 credit | not working</option>
                    <option value="0.30">0.3 credit</option>
                    <option value="0.80">0.8 credit</option>
                    <option value="1.20">1.2 credit | not working</option>
                </select>
            </td>
        </tr>
        <tr>
            <td> <strong>After Confirm Calculation</strong> <br><small>Total Balance - Credit - Tip</small> </td>
            <td id='f_after_confirm'> 35.47 </td>
        </tr>
    </tbody>
</table>

The `0.2` and `1.2` options still show values which the OP is not expecting. You need to call `toFixed()` on the value you place in the `text()` of `#f_after_confirm` — Rory McCrossan, Nov 09 '16 at 09:19
@RoryMcCrossan Yes agree with you thanks for notice this, now changed. — Bharat, Nov 09 '16 at 09:25

score 1 · Answer 2 · edited May 23 '17 at 12:16

The issue is due to inconsistencies in floating point calculations. You can read more about that at the link @Alexis mentioned in the comments, here.

To fix your actual issue you can call toFixed() on the final summed value to format it to the required number of decimal places. Try this:

$("select[name='tip']").on('change', function() {
  var thiz = $(this);
  var content_credit = parseFloat($("#f_content_credit").text()).toFixed(2);
  var total_balance = parseFloat($("#f_total_balance").text()).toFixed(2);
  var tip = parseFloat(thiz.val()).toFixed(2);
  var final = (total_balance - content_credit - tip).toFixed(2);

  console.log(final);
  $("#f_after_confirm").text(final);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered table-hover">
  <tbody>
    <tr>
      <td> <strong>Total Balance</strong> 
      </td>
      <td id='f_total_balance'>45.67</td>
    </tr>
    <tr>
      <td> <strong>Credit</strong> 
      </td>
      <td id='f_content_credit'>10.20</td>
    </tr>
    <tr>
      <td> <strong>TIP BOX</strong>
      </td>
      <td>
        <select name="tip" class='form-control'>
          <option value="0" selected>0 Kredi</option>
          <option value="0.10">0.1 credit</option>
          <option value="0.20">0.2 credit | works now</option>
          <option value="0.30">0.3 credit</option>
          <option value="0.80">0.8 credit</option>
          <option value="1.20">1.2 credit | works now</option>
        </select>
      </td>
    </tr>
    <tr>
      <td> <strong>After Confirm Calculation</strong> 
        <br><small>Total Balance - Credit - Tip</small> 
      </td>
      <td id='f_after_confirm'>35.47</td>
    </tr>
  </tbody>
</table>

score 1 · Answer 3 · answered Nov 09 '16 at 09:30

Use with Math.round(100 * tot) / 100; Its will fixed with .12 digits

$("select[name='tip']").on('change',function(){
    var thiz = $(this);
    var content_credit = parseFloat($("#f_content_credit").text());
    var total_balance = parseFloat($("#f_total_balance").text());
    var tip = parseFloat(thiz.val());
  var tot = total_balance-content_credit-tip;
var cal = Math.round(100 * tot) / 100;
    console.log(cal);
    
    $("#f_after_confirm").text(cal);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered table-hover">
    <tbody>
      <tr>
            <td> <strong>Total Balance</strong> </td>
            <td id='f_total_balance'> 45.67 </td>
        </tr>
      <tr>
            <td> <strong>Credit</strong> </td>
            <td id='f_content_credit'> 10.20 </td>
        </tr>
        <tr>
            <td> <strong>TIP BOX</strong></td>
            <td> 
                <select name="tip" class='form-control'>
                    <option value="0" selected>0 Kredi</option>
                    <option value="0.10">0.1 credit</option>
                    <option value="0.20">0.2 credit | not working</option>
                    <option value="0.30">0.3 credit</option>
                    <option value="0.80">0.8 credit</option>
                    <option value="1.20">1.2 credit | not working</option>
                </select>
            </td>
        </tr>
        <tr>
            <td> <strong>After Confirm Calculation</strong> <br><small>Total Balance - Credit - Tip</small> </td>
            <td id='f_after_confirm'> 35.47 </td>
        </tr>
    </tbody>
</table>

parseFloat Doesn't Give Exact Value

3 Answers3