How to show difference using JavaScript

Nikhil Dange
Nikhil Dange used Ask the Experts™
on
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>
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
ste5anSenior Developer

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>
    <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.
Web Developer
Commented:
Its not working as per my code
ste5anSenior Developer
Commented:
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.
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Nikhil DangeWeb Developer

Author

Commented:
Ya sure I'll try, and really thank you
ste5anSenior Developer
Commented:
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.
Nikhil DangeWeb Developer

Author

Commented:
Thank You

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial