• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Pruebas Online
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

217
Vistas
Feet to meter ( vise versa ) conversion in Javascript and HTML

When the user enters value in feet, the application should calculate the meter equivalent and display the same in meter textfield.

Formula : 1ft = 0.3048m

When the user enters a value in the meter, the application should calculate the feet equivalent and display the same in feet text field.

Formula : 1m = 3.2808ft

Need to update both values simultaneously when I enter either of the input fields.

sample output

Here is my code:

function LengthConverter(val) {
  var input2 = document.getElementById("meter").innerHTML = val / 3.2808;
  console.log(input2);
  val.value = input2.value;
}
<div class="container">
  <div class='ftm'>
    <label for="feet">Feet:</label><br>
    <input id="feet" type="number" placeholder="Feet" onchange="LengthConverter(this.value)">
  </div>
  <div class='ftm'>
    <label for="meter">Meter:</label><br>
    <input id="meter" type="number" placeholder="Meters">
  </div>
</div>

almost 3 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

You can use element.addEventListener to watch for changes to the elements, then run a function to update the other one

const feetInput = document.getElementById('feet');
const meterInput = document.getElementById('meter');

function updateMeter() {
  meterInput.value = feetInput.value / 3.2808;
}

function updateFeet() {
  feetInput.value = meterInput.value * 3.2808;
}

// an input event is similar to change but only fires when the actual
// contents of the input field change
feetInput.addEventListener('input', updateMeter);
meterInput.addEventListener('input', updateFeet);
<div class="container">
  <div class='ftm'>
    <label for="feet">Feet:</label><br>
    <input id="feet" type="number" placeholder="Feet">
  </div>
  <div class='ftm'>
    <label for="meter">Meter:</label><br>
    <input id="meter" type="number" placeholder="Meters">
  </div>
</div>

almost 3 years ago · Juan Pablo Isaza Denunciar

0

Try following :

function LengthConverter(val) {
  var input2 = document.getElementById("meter").value = val / 3.2808;
  console.log(input2);
  val.value = input2.value;
}
<div class="container">
  <div class='ftm'>
    <label for="feet">Feet:</label><br>
    <input id="feet" type="number" placeholder="Feet" onchange="LengthConverter(this.value)">
  </div>
  <div class='ftm'>
    <label for="meter">Meter:</label><br>
    <input id="meter" type="number" placeholder="Meters">
  </div>
</div>

almost 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda