Значение копируется при вводе вручную, но не автоматически при клике

Question

Два поля input1 и input2 дают общую сумму input3 по клику, и ее необходимо скопировать в следующее поле input4, но это не так.

Хотя если вы вводите значение в input3 вручную, после чего оно копируется? (на самом деле оно не копируется в реальном времени, пока вы не нажмете, например, на вкладку или щелкните мышью где-либо, также не знаете, как решить)

Полный код https://jsfiddle.net/tn6wr4xc/1/

Таким образом, в основном, когда вы нажимаете первую кнопку Sum, она должна копировать значение в input4, но это не так, только при вводе вручную.

Извините за код гетто, я знаю, что это Ваниль и jQuery, настоящий новичок здесь.

Answer 1

Вы должны использовать событие input , чтобы внести немедленные изменения для вывода результата.

Я подумаю, что решение отличается от вашего.

Сначала вы можете настроить таргетинг на все входы с классом formA и formB , используя querySelectorAll(). Затем l oop через них присоединить событие ( input ), используя forEach() и addEventListener(). Внутри функции обработчика событий вы можете указывать только указанные c входы, связанные с текущим элементом. Вы можете найти их сумму, используя map() и reduce(). Наконец, сохраните сумму в соответствующем элементе.

var inputs = document.querySelectorAll('.formA, .formB');

Array.from(inputs).forEach(function(el){
  el.addEventListener('input', function(){
    var group = this.closest('div').querySelectorAll('[class^=form]');
    var sum = Array.from(group).map(i => Number(i.value)).reduce((a,c) => a+c,0);
    this.closest('div').querySelector('[name=total]').value = sum;
  });
});

<form id="forms">
  <div class="form-a">
    <p>Form A</p>
    input1 : <input class="formA form-1" type="text" name="qty1"/><br>
    input2 : <input class="formA form-2" type="text" name="qty2"/><br>
    input3 (total) : <input class="total-1" type="text" name="total" id="total"/>
  </div>
  <hr>

  <div class="form-b">
    <p>Form B</p>
    input4 : <input class="formB form-3" type="text" name="qty3"/><br>
    input5 : <input class="formB form-4" type="text" name="qty4"/><br>
    input6 (total) : <input type="text" name="total" id="total2"/>
  </div>
  <input type="reset" value="Reset">
</form>

Answer 2

Я думаю, что вы не можете сделать это таким образом, потому что вы обновляете свойство value с помощью JavaScript, которое не является " пользователем ", поэтому событие не запускается должным образом.

Но чтобы достичь желаемого, вы можете просмотреть эту ссылку . Они описывают много способов преодоления проблемы. И затем одним из наиболее распространенных является прямое изменение значения input4 после того, как вы изменили input3 one таким образом ... result.value = sum; $('.form-3').val(sum);