asked on 3/24/2018

How to show difference using JavaScript

Why NaN?
I want to show difference between 'Total' and 'Paid' amount is 'Total Due' in JavaScript. How to show?

When I calculate 'Subtotal' and 'Tax' the ans will show in 'Total' cell and, When I'm trying to show 'Total Due' from (Total-Paid) then print NaN in 'Total Due' cell in JavaScript
How to do?

JavaScript :
function taxcal()
{
var per=100;
var subtotal=parseInt(document.getElementById('subtotal').value);
var tax=parseInt(document.getElementById('tax').value);
var total=parseInt(document.getElementById('total').value);

if (isNaN(tax)) tax=0;

var total1=(subtotal*(tax/per).toFixed(2));
total=total1+subtotal;
document.getElementById("total").innerHTML=total;
console.log(document.getElementById('total').value);
}

function totaldue()
{
var total=parseInt(document.getElementById('total').value);
var paid=parseInt(document.getElementById('paid').value);
var totaldue=parseInt(document.getElementById('totaldue').value);

var totaldue1=Math.abs((total-paid).toFixed(2));
document.getElementById("totaldue").innerHTML=totaldue1;
}

HTML :
<table>
.
.
.
<td valign="middle" align="center" width="100%">
<input type="text" id="subtotal" name="subtotal" onKeyUp="result(this.form)" onKeyUp="taxcal(this.form)" class="subtotal" value="0.00" style="border:none;width: 100%;"/>
<input type="text" id="tax" class="tax" name="tax" onKeyUp="taxcal(this.form)" onKeyUp="totaldue(this.form)" style="border:none;width: 100%;">
</td>

</tr>
</table>
</div>
<br>
<div class="form-group text-center">
<table style="float: left;margin-left: 25px;" cellpadding="1" cellspacing="1" border="1">
<tr><td width="70%" bgcolor="#e2dad8"><label style="font-style: bold;"><b><font size="4px">Comment :</b></label></td></tr>
<tr>
<td><textarea rows="2" style="width: 100%;border:none;" class="form-control"></textarea></td></tr>
</table>

<table style="float: right;margin-right: 31px;" cellpadding="1" cellspacing="1" border="1" width="30%">
<tr>
<td width="20%" bgcolor="#e2dad8"><b><font size="4px">
Total</b>
</td>
<td width="10%">
<p name="total" id="total" onKeyUp="totaldue(this.form)" readonly="readonly" value="00.00" class="text-center" style="border: none;"></p>
</td>
</tr>
<tr>
<td width="20%" bgcolor="#e2dad8"><b><font size="4px">Paid</b></td>
<td width="10%">
<input type="text" name="paid" onKeyUp="totaldue(this.form)" id="paid" class="text-center" style="border:none;">
</td>
</tr>
<tr>
<td width="20%" bgcolor="#e2dad8"><b><font size="4px">Total Due</b></td>
<td width="10%">
<p class="text-center" id="totaldue" name="totaldue" value="0.00" onKeyUp="totaldue(this.form)" readonly="readonly" style="border:none;"></p>
</td>
</tr>
</table>
</div>

Web Development CSS HTML JavaScript

Last Comment

Nikhil Dange

4/2/2018

ste5an

3/24/2018

Separate concerns. Thus separate retrieving and parsing input data from calculation:
Cause then you will see that the problem is how you try to read the data.

<!DOCTYPE html>
<html>
    <head>
        <script>
            function calculateTotal(subTotal, taxPercentage)
            {
                var result = (subTotal + (subTotal * (isNaN(taxPercentage) ? 0 : taxPercentage)) / 100).toFixed(2);
                return result;
            }

            function calculateDue(total, paid)
            {
                var result = Math.abs((total-paid).toFixed(2));
                return result;
            }

            function calculateAll() {
                var subTotal = parseInt(document.getElementById('subTotal').value);
                var taxPercentage = parseInt(document.getElementById('taxPercentage').value);
                var paid = parseInt(document.getElementById('paid').value);
                var total = calculateTotal(subTotal, taxPercentage);
                var due = calculateDue(total, paid);
                console.log("total: " + total);
                console.log("due: " + due);
                document.getElementById("total").textContent = total;
                document.getElementById("due").textContent = due;
            }
        </script>
    </head>
    <body>
        <form>
            <input type="text" id="subTotal" onKeyUp="calculateAll()" value="0.00" />
            <input type="text" id="taxPercentage" onKeyUp="calculateAll()" value="0.00"/>
            <input type="text" id="paid" onKeyUp="calculateAll()" value="0.00"/>
        </form>
        <p id="total">0
        <p id="due">0
    </body>
</html>