CODEWITHSUNDEEP
javascriptjqueryparsefloat
oguzhancerit
oguzhancerit

Reputation: 1572

parseFloat Doesn't Give Exact Value

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>

Upvotes: 2

Views: 1272

Answers (3)

prasanth
prasanth

Reputation: 22490

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>

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337560

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>

Upvotes: 1

Bharat
Bharat

Reputation: 2464

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>

Upvotes: 1

Related Questions