Блог

У меня есть простое HTML input -поле. Когда пользователь вводит значение, которое не равно 100 , и щелкает за пределами поля ввода, появляется другое поле ввода со значением=100-введенное пользователем значение.

Например: если пользователь вводит 40 первое поле ввода, отображается второе поле ввода 60 . Если первое значение поля ввода равно 100 нулю, то ничего не происходит. Я достигаю этого, просто добавляя и удаляя класс CSS с помощью Javascript.

Проблема в том, что я не могу пройти более 2 уровней , это означает, что если пользователь вводит 40 первое поле ввода, а отображается второе поле ввода 60 , то, если пользователь изменит его 60 на 30 другое поле ввода, должно появиться значение 30 и так далее.

Как я могу добиться этого с помощью Javascript или jQuery?

 (function($) {
  var minNumber = 0;
  var maxNumber = 100;

  $(".dynamic-input").on("change", function() {
    var inputVal = parseFloat($(this).val().replace("%", "")) || 0;
    
    if (minNumber > inputVal) {
      inputVal = 0;
    } else if (maxNumber < inputVal) {
      inputVal = 100;
    }
    
    if (inputVal == 100) {
      var dyn_row = document.getElementById("dynamic-row");
      dyn_row.classList.add("dynamic-row-hidden");
    } else {
      var dyn_row = document.getElementById("dynamic-row");
      dyn_row.classList.remove("dynamic-row-hidden");

      var new_val = parseFloat($(this).val());
      var dynamic_input_get_val =
        document.getElementById("dynamic-input-get");
      dynamic_input_get_val.value = 100 - new_val   "%";
    }
    $(this).val(inputVal   "%");
  });
})(jQuery); 

 .dynamic-row-hidden {
  display: none;
} 

 <input id="dynamic-input" class="dynamic-input dinput" required="required" type="text" />
<div id="dynamic-row" class="dynamic-row dynamic-row-hidden" style="margin-top: 10px">
  <div>
    <input id="dynamic-input-get" class="dynamic-input-get dinput" required="required" type="text" />
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 

Я думаю, ты имел в виду:

…затем, если пользователь изменит это 40 на 30 другое поле ввода, должно появиться значение 30 и так далее

Основываясь на приведенном описании, это должно помочь вам начать:

 var calculatedValue;

var dynamicInput = $('#dynamic-input');
dynamicInput.on('change', function() {
    var dynamicInputGet = $('#dynamic-input-get');
  
    if(dynamicInput.val() <= 100 amp;amp; dynamicInput.val() >= 0) {
        if(!calculatedValue) {
            calculatedValue = 100 - dynamicInput.val();
            dynamicInputGet.val(calculatedValue);
        } else {
            dynamicInputGet.val(dynamicInputGet.val() - dynamicInput.val());
        }
    } else if(dynamicInput.val() < 0) {
          dynamicInput.val(0);
          dynamicInput.trigger('change');
    } else {
        dynamicInput.val(100); 
        dynamicInput.trigger('change');
    }
});