Search code examples
javascripthtmlinputconverters

How do I make this conversion function work in both directions?


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>


Solution

  • 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>