Как проверить значение входа, заданного другими входами?

Question

Сумма верхних входов помещается в нижний вход. Мне нужно запустить код JS, если значение нижнего входа превышает 100. Мой код не работает должным образом.

HTML

<div>
<input type="text" class="top" maxlength="3" value="0" />
<input type="text" class="top" maxlength="3" value="0" />
<input type="text" class="bottom" maxlength="5" value="0" />
</div>

JS

$(document).on("change", ".top", function () {
    var sum = 0;
    $(".top").each(function () {
        sum += +$(this).val();
    });
    $(".bottom").val(sum);
});

$(document).on("change", ".bottom", function () {
    var sum = $(".bottom").val();
    if (sum > 100) {
        alert("Test alert!");
    }
});

Answer 1

Проблема заключается в том, что программное обновление value для input не вызывает событие, поэтому привязанный вами обработчик change никогда не вызывается. Чтобы исправить это trigger() событие вручную после установки val().

Также обратите внимание, что в логи c можно внести несколько других изменений, таких как использование this в обработчике .bottom для ссылки на элемент, вызвавший событие, вместо все .bottom элементов в DOM, а также с использованием события input, которое вызывается при наборе текста, а также при вставке содержимого с помощью мыши.

$(document).on("input", ".top", function() {
  var sum = 0;
  $(".top").each((i, el) => sum += +el.value);
  $(".bottom").val(sum).trigger('input');
});

$(document).on("input", ".bottom", function() {
  var sum = +$(this).val();
  if (sum > 100) {
    console.log("Test alert!");
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <input type="text" class="top" maxlength="3" value="0" />
  <input type="text" class="top" maxlength="3" value="0" />
  <input type="text" class="bottom" maxlength="5" value="0" />
</div>