Link to home
Create AccountLog in
Avatar of Nikhil Dange
Nikhil DangeFlag for India

asked on

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>
Avatar of ste5an
ste5an
Flag of Germany image
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.
ASKER CERTIFIED SOLUTION
Avatar of Nikhil Dange
Nikhil Dange
Flag of India image
Link to home
membership
Create a free account to see this answer
Signing up is free and takes 30 seconds. No credit card required.
See answer
SOLUTION
Avatar of ste5an
ste5an
Flag of Germany image
Link to home
membership
Create a free account to see this answer
Signing up is free and takes 30 seconds. No credit card required.
See answer
Avatar of Nikhil Dange
Nikhil Dange
Flag of India image

ASKER

Ya sure I'll try, and really thank you
SOLUTION
Avatar of ste5an
ste5an
Flag of Germany image
Link to home
membership
Create a free account to see this answer
Signing up is free and takes 30 seconds. No credit card required.
See answer
Avatar of Nikhil Dange
Nikhil Dange
Flag of India image

ASKER

Thank You