如何使这种转换 function 双向工作？

Question

I'm new in JS and I have trouble to finish a converter only with inputs, I explain the problem, We have two input. Meters and Feet. when I transmit a number to Feet I have the result in Meters. And I Want to do the same think with Meters . and vice versa

 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

You can add another parameter in the LengthConvertor function which will say the input unit (meter or feet) and convert it accordingly inside the function using 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

Added inverse conversion:

 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

You can add a element.addEvenetListener to each input, and when it chances you get it's value, convert, and put in on the right input.

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

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

For exemple, if metres input changes, you convert to feets and add to feets input.