Как на лету конвертировать единицы измерений?

Question

[Александр Андропов]

Добрый день. Есть два инпута и два селекта. Мне нужно "на лету" конвертировать единиц измерения, например массы.
При вводе в первый инпут значения, если в селекте выбраны Килограммы, тогда нужно во втором инпуте отобразить значения в граммах (потому что там по умолчанию выбраны граммы) и наоборот.

Нужно сделать возможность вводить во втором инпуте значения в граммах, чтобы они "на лету" в первом инпуте конвертировались в значения в килограммах, но проблема в том, что во второй инпут я не могу ничего вводить, так как он "на лету" конвертит значение из первого инпута. Как решить проблему и сделать так, чтобы в зависимости от выбранного селекта при вводе значения в первом инпуте, появлялось (считалось) значение внутри второго инпута и наоборот ?

Вот форма HTML

<div class="row justify-content-center">
                    
                    <div class="col-xl-2 col-sm-6 text-center mt-2">
                      <input type="text" name="first" class="form-control" placeholder="Значение 1 (кг)"/>
                    </div>
                    
                    <div class="col-xl-2 col-sm-6 text-center mt-2">
                        <select class="form-select" name="first_value" required>
                          <option value="Килограмм">Килограмм (кг)</option>
                          <option value="Грамм">Грамм (г)</option>
                          <option value="Миллиграмм">Миллиграмм (мг)</option>
                          <option value="Тонна">Тонна (т)</option>
                          <option value="Сантиграмм">Сантиграмм (сг)</option>
                          <option value="Микрограмм">Микрограмм (мкг)</option>
                          <option value="Центнер">Центнер (ц)</option>
                          <option value="Килотонна">Килотонна (кт)</option>
                          <option value="Килоньютон на Земле">Килоньютон на Земле (кН)</option>
                          <option value="Ньютон на Земле">Ньютон на Земле (Н)</option>
                          <option value="Карат">Карат (кар)</option>
                          <option value="Единица атомной массы">Единица атомной массы (u)</option>
                        </select>
                    </div>
                    
                    <div class="col-xl-2 col-sm-6 text-center mt-2">
                      <button class="btn btn-icon btn-icon-start btn-primary" type="button">
                        <i data-cs-icon="refresh-horizontal"></i>
                      </button>
                    </div>
                    
                    <div class="col-xl-2 col-sm-6 text-center mt-2">
                      <input type="text" name="second" class="form-control" placeholder="Значение 2 (т)"/>
                    </div>
                    
                    <div class="col-xl-2 col-sm-6 text-center mt-2">
                        <select class="form-select" name="second_value" required>
                          <option value="Килограмм">Килограмм (кг)</option>
                          <option value="Грамм" selected>Грамм (г)</option>
                          <option value="Миллиграмм">Миллиграмм (мг)</option>
                          <option value="Тонна">Тонна (т)</option>
                          <option value="Сантиграмм">Сантиграмм (сг)</option>
                          <option value="Микрограмм">Микрограмм (мкг)</option>
                          <option value="Центнер">Центнер (ц)</option>
                          <option value="Килотонна">Килотонна (кт)</option>
                          <option value="Килоньютон на Земле">Килоньютон на Земле (кН)</option>
                          <option value="Ньютон на Земле">Ньютон на Земле (Н)</option>
                          <option value="Карат">Карат (кар)</option>
                          <option value="Единица атомной массы">Единица атомной массы (u)</option>
                        </select>
                    </div>                  
                    
                  </div>

Вот JS (jQuery)

<script>
$(document).ready(function() {
  function updateValues() {
    var firstValue = $('select[name="first_value"]').val();
    var secondValue = $('select[name="second_value"]').val();
    var firstInputValue = parseFloat($('input[name="first"]').val());
    var secondInputValue = parseFloat($('input[name="second"]').val());
    
    switch (firstValue) {
      case "Килограмм":
        convertToSecond = firstInputValue * 1000;
        break;
      case "Грамм":
        convertToSecond = firstInputValue;
        break;
      case "Миллиграмм":
        convertToSecond = firstInputValue / 1000;
        break;
      case "Тонна":
        convertToSecond = firstInputValue * 1000000;
        break;
      case "Сантиграмм":
        convertToSecond = firstInputValue / 10;
        break;
      case "Микрограмм":
        convertToSecond = firstInputValue / 1000000;
        break;
      case "Центнер":
        convertToSecond = firstInputValue * 100000;
        break;
      case "Килотонна":
        convertToSecond = firstInputValue * 1e+9;
        break;
      case "Килоньютон на Земле":
        convertToSecond = firstInputValue * 101971.621;
        break;
      case "Ньютон на Земле":
        convertToSecond = firstInputValue * 101.971621;
        break;
      case "Карат":
        convertToSecond = firstInputValue * 0.2;
        break;
      case "Единица атомной массы":
        convertToSecond = firstInputValue * 1.66054e-24;
        break;
      default:
        console.log("Недопустимая единица измерения.");
        break;
    }
    
    $('input[name="second"]').val(convertToSecond);
  }

  $('select[name="first_value"], select[name="second_value"], input[name="first"], input[name="second"]').on('change input', function() {
    updateValues();
  });
});
</script>

Answer 1

[leeroyjenkins176]

С помощью event.target определить, в какой группе полей возникло событие - в первой или во второй. Предположим, что во второй. Тогда:
- в switch передаем значение input второй группы
- полученное значение записываем в input первой группы
Если событие вызвали поля первой группы, тогда все наоборот.

Comments

[Александр Андропов]

Спасибо за помощь Вам! Можно пожалуйста пример на основании моего вышеописанного решения?

[leeroyjenkins176]

Александр Андропов, codepen

[Александр Андропов]

leeroyjenkins176, спасибо огромное!