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>
Nikhil DangeIT Engineering studentAsked:
Who is Participating?
 
Nikhil DangeConnect With a Mentor IT Engineering studentAuthor Commented:
Its not working as per my code
0
 
ste5anSenior DeveloperCommented:
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>

Open in new window


p.s. use the CODE button to embed code. It's much more reader friendly.
1
 
ste5anConnect With a Mentor Senior DeveloperCommented:
Its not working as per my code
That is coding. Craft a concise and complete sample from your code. Then you may already see what the problem is. Otherwise post it.

Caues your code has many aspects, which makes it hard to see what is happening.
1
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
Nikhil DangeIT Engineering studentAuthor Commented:
Ya sure I'll try, and really thank you
0
 
ste5anConnect With a Mentor Senior DeveloperCommented:
btw, don't use <font> it's deprecated and no longer supported in HTML5. Then  don't use <br> as layout tag in  </div><br><div class="form-group text-center">.

Then use CSS for all elements to do your layout.
1
 
Nikhil DangeIT Engineering studentAuthor Commented:
Thank You
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.