自动减去100中的两个值

Question

I created two input fields where they should substract from each other keeping a max value at 100.

Currently it substracted value is shown in the second value. I want it to be interchangeable. Irrespective of whether I put in first or second input field, the answer shows in the other.

Could someone help?

 function updateDue() { var total = parseInt(document.getElementById("totalval").value); var val2 = parseInt(document.getElementById("inideposit").value); // to make sure that they are numbers if (!total) { total = 0; } if (!val2) { val2 = 0; } var ansD = document.getElementById("remainingval"); ansD.value = total - val2; var val1 = parseInt(document.getElementById("inideposit").value); // to make sure that they are numbers if (!total) { total = 0; } if (!val1) { val1 = 0; } var ansD = document.getElementById("remainingval"); ansD.value = total - val1; } 

 <input type="hidden" id="totalval" name="totalval" value="100" onchange="updateDue()"> <div> Enter Value: <input type="text" name="inideposit" class="form-control" id="inideposit" onchange="updateDue()"> </div> <div> Substracted: <input type="text" name="remainingval" class="form-control" id="remainingval" onchange="updateDue()"> </div> 

Answer 1

The simple way to achieve this would be to group the inputs by class and attach a single event handler to them. Then you can take the entered value from 100 , and set the result to the field which was not interacted with by the user. To do that in jQuery is trivial:

 $('.updatedue').on('input', function() { var total = parseInt($('#totalval').val(), 10) || 0; var subtracted = total - (parseInt(this.value, 10) || 0); $('.updatedue').not(this).val(subtracted); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="hidden" id="totalval" name="totalval" value="100" /> <div> Enter Value: <input type="text" name="inideposit" class="updatedue form-control" id="inideposit" /> </div> <div> Subtracted: <input type="text" name="remainingval" class="updatedue form-control" id="remainingval" /> </div> 

You can easily validate this so that outputs < 0 and > 100 can be discounted, if required.

Answer 2

Edit your code as below

 function updateDue(box) { var total = parseInt(document.getElementById("totalval").value); if(box == 1){ var val = parseInt(document.getElementById("inideposit").value); // to make sure that they are numbers if (!total) { total = 0; } if (!val) { val = 0; } var ansD = document.getElementById("remainingval"); ansD.value = total - val; }else if(box == 2){ var val = parseInt(document.getElementById("remainingval").value); // to make sure that they are numbers if (!total) { total = 0; } if (!val) { val = 0; } var ansD = document.getElementById("inideposit"); ansD.value = total - val; } } 

 <input type="hidden" id="totalval" name="totalval" value="100" onchange="updateDue(0)"> <div> Enter Value: <input type="text" name="inideposit" class="form-control" id="inideposit" onchange="updateDue(1)"> </div> <div> Substracted: <input type="text" name="remainingval" class="form-control" id="remainingval" onchange="updateDue(2)"> </div>