Блог

Как вы можете видеть на конверсии Google по адресу: Здесь

Когда вы нажимаете на второе выпадающее окно и выбираете meters, вместо того, чтобы оно оставалось на уровне 12 метров, оно преобразуется в .3048 метров, чего я не хочу. Я хочу, чтобы при переходе на метры в правом раскрывающемся списке он оставался равным 12 метрам, а поле слева обновлялось до 39,3701 футов. Вот мой код на данный момент.

 var units = [['Inches', 0.025400000000000], ['Feet', 0.30480000000000000], ['Furlongs', 201.168], ['Meters', 1.00]];
 var selectors = document.querySelectorAll('.newClass1');
 
 for (var i = 0; i < units.length; i  ) {
   for (var j = 0; j < selectors.length; j  ) {
     var option = document.createElement('option');
     option.value = units[i][1];
     option.textContent = units[i][0];
     selectors[j].add(option);
   }
 }
 
    function calcLength1() {
  var SpecialValue = parseFloat(document.getElementById("lengthInput1").value) * parseFloat(document.getElementById("lengthCalc1").value) / parseFloat(document.getElementById("lengthCalc2").value);
  document.getElementById("lengthInput2").value = SpecialValue;
   
}

function calcLength2() {
  var SpecialValue = parseFloat(document.getElementById("lengthInput2").value) * parseFloat(document.getElementById("lengthCalc2").value) / parseFloat(document.getElementById("lengthCalc1").value);
  document.getElementById("lengthInput1").value = SpecialValue;
}
  

Вот мой HTML:

 <div class="panel">
    <p>From:</p>
    <select style="float:left" id="lengthCalc1" class="js-example-basic-single select2-container newClass1" oninput="calcLength2()" onchange="calcLength2()">
    </select>
    <input style="height:50%;font-size:15pt;width:1000px; border: 1px solid #000;" id="lengthInput1" type="number" oninput="calcLength1()" />
    <p>To:</p>
    <select style="float:left" id="lengthCalc2" class="js-example-basic-single select2-container newClass1" oninput="calcLength1()" onchange="calcLength1()">   
    </select>
    <input style="height:50%;font-size:15pt;width:1000px; border: 1px solid #000;" id="lengthInput2" type="number" oninput="calcLength2()" onchange="calcLength2()" />
</div>
  

Он полностью ошибочен. Пожалуйста, помогите мне сделать хороший калькулятор.

Обновление: чтобы конвертер функционировал так же, как и конвертер длины Google, вы можете попробовать следующее:

1. Обновляйте значение второго поля ввода при изменении любого из выпадающих списков единиц измерения.
2. Обновляйте первое поле ввода при изменении второго поля ввода, и наоборот.

Это означает, что ваше первое значение поля ввода будет обновляться только тогда, когда пользователь изменит значение второго ввода. Попробуйте использовать конвертер Google, он ведет себя точно так же.

Используйте следующий код, чтобы заставить его работать.

 var units = [
  ['Inches', 0.025400000000000],
  ['Feet', 0.30480000000000000],
  ['Furlongs', 201.168],
  ['Meters', 1.00]
];
var selectors = document.querySelectorAll('.newClass1');

for (var i = 0; i < units.length; i  ) {
  for (var j = 0; j < selectors.length; j  ) {
    var option = document.createElement('option');
    option.value = units[i][1];
    option.textContent = units[i][0];
    selectors[j].add(option);
  }
}

function updateInputBox2() {
  var SpecialValue = parseFloat(document.getElementById("lengthInput1").value) * parseFloat(document.getElementById("lengthCalc1").value) / parseFloat(document.getElementById("lengthCalc2").value);

  document.getElementById("lengthInput2").value = SpecialValue;

}

function updateInputBox1() {
  var SpecialValue = parseFloat(document.getElementById("lengthInput2").value) * parseFloat(document.getElementById("lengthCalc2").value) / parseFloat(document.getElementById("lengthCalc1").value);

  document.getElementById("lengthInput1").value = SpecialValue;
}  

 <div class="panel">
  <p>From:</p>
  <select style="float:left" id="lengthCalc1" class="js-example-basic-single select2-container newClass1" oninput="updateInputBox2()" onchange="updateInputBox2()">
  </select>
  <input style="height:50%;font-size:15pt;width:1000px; border: 1px solid #000;" id="lengthInput1" type="number" oninput="updateInputBox2()" />
  <p>To:</p>
  <select style="float:left" id="lengthCalc2" class="js-example-basic-single select2-container newClass1" oninput="updateInputBox2()" onchange="updateInputBox2()">
  </select>
  <input style="height:50%;font-size:15pt;width:1000px; border: 1px solid #000;" id="lengthInput2" type="number" oninput="updateInputBox1()" onchange="updateInputBox1()" />
</div>  

Первая проблема с преобразованием (устарела)

Правильно преобразуйте значения в число, и это должно сработать. В вашем коде несколько опечаток, а также ошибка назначения левой руки. Посмотрите на эту строку в вашем коде, есть две ошибки:

   parseFloat(document.getElementById("lengthInput2").value) = praseFloat(SpecialValue);
  

Попробуйте это, это должно сработать.

 function calcLength1() {
  var SpecialValue = parseFloat(document.getElementById("lengthInput1").value) * parseFloat(document.getElementById("lengthCalc1").value) / parseFloat(document.getElementById("lengthCalc2").value);
  
  document.getElementById("lengthInput2").value = SpecialValue;
   
}

function calcLength2() {
  var SpecialValue = parseFloat(document.getElementById("lengthInput2").value) * parseFloat(document.getElementById("lengthCalc2").value) / parseFloat(document.getElementById("lengthCalc1").value);
  
  document.getElementById("lengthInput1").value = SpecialValue;
}