Avatar of Nikhil Dange
Nikhil Dange
Flag 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>
Web DevelopmentCSSHTMLJavaScript

Avatar of undefined
Last Comment
Nikhil Dange

8/22/2022 - Mon
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>
    <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
Nikhil Dange

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
SOLUTION
Log in to continue reading
Log In
Sign up - Free for 7 days
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
Nikhil Dange

ASKER
Ya sure I'll try, and really thank you
SOLUTION
Log in to continue reading
Log In
Sign up - Free for 7 days
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
Nikhil Dange

ASKER
Thank You
Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes