如何使用JS通过更改另一个字段值来自动更改一个输入字段值

有两个输入字段total_amount & delivery_charge.

total_amount字段已经有一个值，现在我希望当我输入一些值时delivery_charge字段将改变total_amount字段的值。

Suppose total_amount字段的值为200.

现在我输入20 into delivery_charge场，这将影响total_amount字段和值将是220.

对于任何类型的更改delivery_charge字段的值会改变total_amount field.

但对于我自己来说，它不会完全改变。

Suppose total_amount is 200

当输入delivery_charge = 2

total_amount = 202

当输入delivery_charge = 20

total_amount = 2020

这是我的代码详细信息

html

<h4>Grand Total : <input type="number" id="total_amount" readonly class="form-control total_amount" value="0.00"></h4>

<input type="text" name="delivery_charge" id="delivery_charge" class="form-control">

js

$('#delivery_charge').keyup(function(event) {
            var total_amount = $('.total_amount').val();
            var delivery_charge = $(this).val();
            var grand_total_amount = total_amount + delivery_charge;
            $('.total_amount').val(grand_total_amount);
});

有人帮忙吗？提前致谢。

你可以尝试这个解决方案。

1. 存储total_amount以便当我们在交付更改时更新它时，您可以获得原始值。
2. Use parseInt()确保您获得的值不是字符串。

const total_amount = parseInt($('.total_amount').val());

$('#delivery_charge').keyup(function() {
  $('.total_amount').val(total_amount + parseInt($(this).val() || 0));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h4>Grand Total :
  <input type="number" id="total_amount" readonly class="form-control total_amount" value="200"></h4>

<input type="number" name="delivery_charge" id="delivery_charge" class="form-control">