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

Question

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.

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>

Sounds like you have everything you need, where are you stuck? — DBS, Nov 11 '21 at 17:11
@DBS problem is that I'm not able to update the value in another input feel. But to check the value I did console.log the value is present there. but not outputting to another input field. pasted my code in the question. — Bluefin zen, Nov 11 '21 at 17:15
Add an onchange event that grabs the neighbouring input fields and makes the changes. — Invizi, Nov 11 '21 at 17:18
@vazenfino try document.getElementById("meter").value instead of innerHTML — Shreekesh Murkar, Nov 11 '21 at 17:28
@vazenfino : I have added answer below. It is working. Please check — Shreekesh Murkar, Nov 11 '21 at 17:44

score 3 · Answer 1 · edited Nov 11 '21 at 18:15

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>

Thanks for your answer. can you show what to change in HTML when I use this addEventListener? — Bluefin zen, Nov 11 '21 at 17:41
You can mention that `input` results in immediate update since it doesn't wait for the element to lose focus to trigger as `change` does. — pilchard, Nov 11 '21 at 18:17

score 1 · Accepted Answer · answered Nov 11 '21 at 17:42

1

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>

answered Nov 11 '21 at 17:42

Shreekesh Murkar

565
4
9

Thanks, Shreekesh, I got it and I implemented one more function for converting meters to feet. When you commented for the first time I guess it should be working that time it's my mistake that I put an input focus on the text box so that when I type a number in feet it doesn't show in the meters because I haven't focused it yet :) – Bluefin zen Nov 11 '21 at 18:01

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

2 Answers2