jquery - 计算输入的多个数字

Question

I was able to convert the output text field into a plain text using below code:

 $("#input2,#input1").keyup(function() { $('#output').val($('#input1').val() * $('#input2').val()); $('#output').replaceWith(function() { return this.value || this.innerHTML; }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="hidden" name="input1" id="input1" value="2"> <input type="text" name="input2" id="input2" value=""><br><br> You get back $<input type="text" name="output" id="output" value="">.00

But the issue is the script is only working for single digit numbers (0-9) and not multiple numbers. How to make this work for multiple numbers. Also how to make this dynamic. Please advise.

Answer 1

You replace the #output input with the result of your first calculation. Meaning that it's not there any more (because it got replaced)

So for the second number there is nothing to replace, which means it stays the same.

To change it: Update the value only and don't replace the whole element.

 $("#input2,#input1").keyup(function() { $('#output').val($('#input1').val() * $('#input2').val()); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="hidden" name="input1" id="input1" value="2"> <input type="text" name="input2" id="input2" value=""><br><br> You get back $<input type="text" name="output" id="output" value="">.00