# 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>
Total</b>
</td>
<td width="10%">
</td>
</tr>
<tr>
<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="10%">
</td>
</tr>
</table>
</div>
Web DevelopmentCSSHTMLJavaScript

Last Comment
Nikhil Dange
ste5an

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>
<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>
<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>
``````

p.s. use the CODE button to embed code. It's much more reader friendly.
Nikhil Dange

THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
SOLUTION
ste5an

THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
Nikhil Dange

Ya sure I'll try, and really thank you
SOLUTION
ste5an

THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
Nikhil Dange

Thank You
JavaScript

JavaScript is a dynamic, object-based language commonly used for client-side scripting in web browsers. Recently, server side JavaScript frameworks have also emerged. JavaScript runs on nearly every operating system and in almost every mainstream web browser.

127K
Questions
--
Followers
--
Top Experts
Get a personalized solution from industry experts

TRUSTED BY