如何使這種轉換 function 雙向工作？

Question

我是 JS 的新手，我無法僅通過輸入完成轉換器，我解釋了問題，我們有兩個輸入。 米和英尺。 當我將一個數字傳輸到 Feet 時，我的結果是 Meters。 我想對 Meters 做同樣的想法。 反之亦然

 let metresEl = document.getElementById('inputMetres'); function LengthConverter(valNum) { metresEl.value = valNum/3.2808; }

 <div class="container"> <div class="form-group"> <label>Feet</label> <input type="number" id="inputFeet" placeholder="Feet" oninput="LengthConverter(this.value)" onchange="LengthConverter(this.value)" > </div> <div class="form-group"> <label>Metres</label> <input type="number" id="inputMetres" placeholder="Metres"> </div> </div>

Answer 1

您可以在LengthConvertor function 中添加另一個參數，該參數將表示輸入單位（米或英尺）並在 function 中使用if進行相應的轉換。

function LengthConverter(valNum, inputUnit) {
   if(inputUnit === 'feet')
    metresEl.value = valNum/3.2808;
   if(inputUnit === 'meter')
    feetsEL.value = valNum * 3.2808;
}


<div class="container">
    <div class="form-group">
      <label>Feet</label>
      <input type="number" id="inputFeet" placeholder="Feet" oninput="LengthConverter(this.value,"feet")" onchange="LengthConverter(this.value,"feet")" >
    </div>
    <div class="form-group">
      <label>Metres</label>
      <input type="number" id="inputMetres" placeholder="Metres" oninput="LengthConverter(this.value,"meter")" onchange="LengthConverter(this.value,"meter")" >
    </div>
  </div>

Answer 2

添加了逆變換：

 let metresEl = document.getElementById('inputMetres'); let feetEl = document.getElementById('inputFeet'); function FeetToMetres(valNum) { metresEl.value = valNum/3.2808; } function MetresToFeet(valNum) { feetEl.value = 3.2808*valNum; }

 <div class="container"> <div class="form-group"> <label>Feet</label> <input type="number" id="inputFeet" placeholder="Feet" oninput="FeetToMetres(this.value)" onchange="FeetToMetres(this.value)" > </div> <div class="form-group"> <label>Metres</label> <input type="number" id="inputMetres" placeholder="Metres" oninput="MetresToFeet(this.value)" onchange="MetresToFeet(this.value)"> </div> </div>

Answer 3

您可以將element.addEvenetListener添加到每個輸入，當您有機會獲得它的值時，轉換並放入正確的輸入。

let metresEl = document.getElementById('inputMetres');
let feetsEl = document.getElementById('inputFeets');

metresEl.addEventListener('change', yourCode);
feetsEl.addEventListener('change', yourCode);

例如，如果米輸入發生變化，則轉換為英尺並添加到英尺輸入。