We help IT Professionals succeed at work.

# How to show difference using JavaScript

on
126 Views
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>
Comment
Watch Question

## View Solutions Only

Senior Developer
CERTIFIED EXPERT

Commented:
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.
Web Developer
Commented:
This problem has been solved!
(Unlock this solution with a 7-day Free Trial)
Senior Developer
CERTIFIED EXPERT
Commented:
This problem has been solved!
(Unlock this solution with a 7-day Free Trial)
Web Developer

Commented:
Ya sure I'll try, and really thank you
Senior Developer
CERTIFIED EXPERT
Commented:
This problem has been solved!
(Unlock this solution with a 7-day Free Trial)
Web Developer

Commented:
Thank You

Gain unlimited access to on-demand training courses with an Experts Exchange subscription.

###### Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

Deciding to stick with EE.

Mohamed Asif

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
###### Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE