oguzhancerit oguzhancerit - 24 days ago 18
Javascript Question

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>




Answer

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>

Comments