Javascript 和 HTML 中英尺到米（反之亦然）的轉換

Question

當用戶輸入以英尺為單位的值時，應用程序應計算米當量並在米文本字段中顯示相同的值。

Formula : 1ft = 0.3048m

當用戶在儀表中輸入一個值時，應用程序應計算英尺當量並在英尺文本字段中顯示相同的值。

Formula : 1m = 3.2808ft

當我輸入任一輸入字段時，需要同時更新兩個值。

這是我的代碼：

 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>

Answer 1

您可以使用element.addEventListener來觀察元素的變化，然后運行一個函數來更新另一個

 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>

Answer 2

嘗試以下：

 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>