Уменьшение числового входного значения при увеличении другого входного значения

Question

Я должен работать с двумя входными значениями, которые хранят только целые числа, когда я увеличиваю значение одного, другое должно уменьшаться.Это должно прекратиться, если второе значение достигнет 0.

Поле, содержащее уменьшаемое значение, называется с идентификатором form_val62_1, а поле, которое может быть увеличено с помощью пользовательского ввода, называется form_val63_1.Я вызываю эту функцию onChange(), потому что мне нужно передать идентификатор формы (потому что поля формы генерируются динамически в зависимости от длины массива PHP).

  function check(i) {
        $("#form_val63_" + i ).change(function () {
          var direction = this.defaultValue < this.value;
          this.defaultValue = this.value;
          var val;
          val = parseInt($("#form_val62_" + i).val());
          if (direction) {
            if (val > 0) {
              $('#form_val62_' + i).val(parseInt($(this).val()) - 1);
            } else {
              var thvar = $(this).val();
              $(this).val(thvar - 1);
            }
            console.log("increase 503");
            console.log(val);
          } else {
            $('#form_val62_' + i).val(parseInt($(this).val()) + 1);
            console.log("decrease 503");
            console.log(val);
          }
        });
      }

Fiddle

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

Используя решение, предоставленное @ Ph0b0x, я обновил свой код как

 var v = $("#form_val62_" + i).val(); //Let's say this is the value from PHP....
                var preVal = 0;

                $("#form_val62_" + i).val(v);

                $("#form_val63_" + i).on("change keyup keydown", function(event) {
                    let currVal = parseInt($("#form_val63_" + i).val());

                    console.log(preVal);
                    console.log(currVal);

                    if (currVal == 0) {
                        preVal = 0;
                        $("#form_val62_" + i).val(v);
                    } else if (currVal <= v) {
                        $("#form_val62_" + i).val((v - currVal) == 0 ? 0 : (v - currVal));
                        preVal = currVal;
                    } else {
                        $("#form_val63_" + i).val(v);
                    }

                });

Теперь я могу увеличить результат, но когда я пытаюсь уменьшить, каждое значение остается равным 0.

Answer 1

Так что связывайте обработчики событий изменений на обоих элементах.Я бы просто использовал атрибуты данных, чтобы вам не пришлось беспокоиться о выборе по идентификаторам для связи между ними.

$('[data-num-grp]').on('input', function () {
  // input that was interacted with
  const inp1 = $(this);
  // get the group number
  const grp = inp1.data('num-grp')
  // select the other element with the grp
  const inp2 = $('[data-num-grp="' + grp + '"]').not(inp1);
  // alter the other element so it's value changes
  inp2.val(this.max - this.value)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" data-num-grp="1" min="0" max="10" value="10"/>
<input type="number" data-num-grp="1" min="0" max="10" value="0"/>
<br/>
<input type="number" data-num-grp="2" min="0" max="10" value="10"/>
<input type="number" data-num-grp="2" min="0" max="10" value="0"/>

Answer 2

Полагаю, если я правильно понял, я буду отслеживать предыдущее значение на втором входе, затем начну уменьшать первое, пока оно не достигнет 0, и увеличить его, пока оно не достигнет 10? Fiddle

HTML

<form>
  <input id="form_val62_1" type="number" min="0" value="10" />
  <input id="form_val63_1" type="number" min="0" value="0" />
</form>

JS

var v = 13; //Let's say this is the value from PHP....
var preVal = 0;

$("#form_val62_1").val(v);

$("#form_val63_1").on("change keyup keydown", function(event) {
  let currVal = parseInt($("#form_val63_1").val());

  console.log(preVal);
  console.log(currVal);

  if (currVal == 0) {
    preVal = 0;
    $("#form_val62_1").val(v);
  } else if (currVal <= v) {
    $("#form_val62_1").val((v - currVal) == 0 ? 0 : (v - currVal));
    preVal = currVal;
  } else {
    $("#form_val63_1").val(v);
  }

});

Редактировать: Я обновил свой код на основе вашего комментария.Пожалуйста, смотрите это Скрипка