Cuando el usuario ingresa el valor en pies, la aplicación debe calcular el equivalente en metros y mostrar lo mismo en el campo de texto del medidor.
Formula : 1ft = 0.3048m
Cuando el usuario ingresa un valor en el medidor, la aplicación debe calcular el equivalente en pies y mostrar el mismo campo de texto en pies.
Formula : 1m = 3.2808ft
Necesito actualizar ambos valores simultáneamente cuando ingreso cualquiera de los campos de entrada.
Aquí está mi código:
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>
Puede usar element.addEventListener
para observar los cambios en los elementos y luego ejecutar una función para actualizar el otro
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>
Intenta lo siguiente:
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>