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?


JavaScript Code:
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 Code :
<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="0.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>