基于JavaScript和HTML实现英尺与米双向实时转换的问题求解

DevOps 小满

2026-9-26

英尺米单位换算器实现问题修复

原有代码存在的问题

表单值赋值属性错误：input输入框的值需要通过value属性修改，原有代码误用了innerHTML属性，无法正确给输入框赋值
缺少双向事件绑定：仅给英尺输入框绑定了转换事件，米输入框没有绑定对应事件，无法实现米转英尺的反向计算
函数逻辑混乱：调用函数时传入的是输入框的数值（this.value），不是元素对象，后续尝试读取val.value属于无效操作，且没有判断触发源无法区分转换方向
触发时机不符合要求：使用onchange事件仅在输入框失焦时触发，无法实现输入过程中实时同步更新，应该改用oninput事件

修复后的完整代码

HTML代码

<div class="container">
  <div class='ftm'>
    <label for="feet">Feet:</label><br>
    <input id="feet" type="number" placeholder="Feet" oninput="LengthConverter('feet', this.value)">
  </div>
  <div class='ftm'>
    <label for="meter">Meter:</label><br>
    <input id="meter" type="number" placeholder="Meters" oninput="LengthConverter('meter', this.value)">
  </div>
</div>

JS代码

function LengthConverter(type, val) {
  // 转换为数字，空输入时清空另一个输入框
  const num = parseFloat(val);
  if (isNaN(num)) {
    document.getElementById('feet').value = '';
    document.getElementById('meter').value = '';
    return;
  }
  // 英尺转米：1ft = 0.3048m
  if (type === 'feet') {
    document.getElementById('meter').value = (num * 0.3048).toFixed(4);
  } 
  // 米转英尺：1m = 3.2808ft
  else if (type === 'meter') {
    document.getElementById('feet').value = (num * 3.2808).toFixed(4);
  }
}