javascript – when I pay my total amount the change is negative-ThrowExceptions

Exception or error:

I want to make a transaction billing. My error is once the patient paid the bill about the amount of procedure is to be done so the error is that when the patient pays the total amount the change is negative

enter image description here

$(function() {
  $("#edit_payment").on("keydown keyup", sum);

  function sum() {
    var textValue1 = document.getElementById('edit_payment').value;
    var textValue2 = document.getElementById('edit_amount').value;
    if (textValue1 > textValue2) {
      document.getElementById('edit_balance').value = "0";
      document.getElementById('edit_change').value = textValue1 - textValue2;
    } else if (textValue1 < textValue2) {
      document.getElementById('edit_change').value = "0";
      document.getElementById('edit_balance').value = textValue2 - textValue1;
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>
  <strong>Amount (US$) </strong>: <input type="text" name="edit_amount" id="edit_amount" />
</p>
<p>
  <strong>Payment (US$)</strong>: <input type="text" name="edit_payment" id="edit_payment" />
</p>
<p>
  <strong>Change (US$) </strong>: <input type="text" name="edit_change" id="edit_change" />
</p>
<p>
  <strong>Balance (US$)</strong>: <input type="text" name="edit_balance" id="edit_balance" />
</p>
How to solve:

Although the maths appears correct, you are performing the comparisons on string values not numbers. In this context '600' is “greater than” '1000', so the logic appears reversed.

Parse the values first as numbers Number.parseFloat() first.

$(function() {
  $("#edit_payment").on("keydown keyup", sum);

  function sum() {
    var textValue1 = Number.parseFloat(document.getElementById('edit_payment').value);
    var textValue2 = Number.parseFloat(document.getElementById('edit_amount').value);
    if (textValue1 > textValue2) {
      document.getElementById('edit_balance').value = "0";
      document.getElementById('edit_change').value = textValue1 - textValue2;
    } else if (textValue1 < textValue2) {
      document.getElementById('edit_change').value = "0";
      document.getElementById('edit_balance').value = textValue2 - textValue1;
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>
  <strong>Amount (US$) </strong>: <input type="text" name="edit_amount" id="edit_amount" />
</p>
<p>
  <strong>Payment (US$)</strong>: <input type="text" name="edit_payment" id="edit_payment" />
</p>
<p>
  <strong>Change (US$) </strong>: <input type="text" name="edit_change" id="edit_change" />
</p>
<p>
  <strong>Balance (US$)</strong>: <input type="text" name="edit_balance" id="edit_balance" />
</p>

###

You should warn the user for this

$(function() {
  $("#edit_payment").on("keydown keyup", function(){
    var payment = Number($('#edit_payment').val());
    var amount = Number($('#edit_amount').val());
    if(amount < payment ){
    alert('Paying amount more than Assigned amount!' );
    $('#edit_payment').val(amount);
    $('#edit_change').val(0);
    }else{    
    var change  = amount - payment;
    $('#edit_change').val(change); 
    }
  })
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>
  <strong>Amount (US$) </strong>: <input type="text" name="edit_amount" id="edit_amount" />
</p>
<p>
  <strong>Payment (US$)</strong>: <input type="text" name="edit_payment" id="edit_payment" />
</p>
<p>
  <strong>Change (US$) </strong>: <input type="text" name="edit_change" id="edit_change" />
</p>
<p>
  <strong>Balance (US$)</strong>: <input type="text" name="edit_balance" id="edit_balance" />
</p>

Leave a Reply

Your email address will not be published. Required fields are marked *