如何使此转换功能双向工作？答案

【问题标题】：How do I make this conversion function work in both directions?如何使此转换功能双向工作？
【发布时间】：2021-08-07 18:43:51
【问题描述】：

我是 JS 新手，我无法仅通过输入完成转换器，我解释了问题！我们有两个输入，米和英尺。当我将一个数字传输到 Feet 时，我的结果是 Meters。我想对 Meters 做同样的想法。反之亦然

let metresEl = document.getElementById('inputMetres');


function LengthConverter(valNum) {
    metresEl.value = valNum/3.2808;
}

  <div class="container">
    <div class="form-group">
      <label>Feet</label>
      <input type="number" id="inputFeet" placeholder="Feet" oninput="LengthConverter(this.value)" onchange="LengthConverter(this.value)" >
    </div>
    <div class="form-group">
      <label>Metres</label>
      <input type="number" id="inputMetres" placeholder="Metres">
    </div>
  </div>

【问题讨论】：

我见过更好的。我建议您阅读有关如何创建minimal reproducible example 的信息。您的原始问题中有太多不相关的细节。我已经编辑了这些内容，以展示您如何用更少的代码（minimal）提出同样的问题

标签： javascript html input converters

【解决方案1】：

您可以在LengthConvertor 函数中添加另一个参数，该参数表示输入单位（米或英尺），并在函数内部使用if 进行相应的转换。

function LengthConverter(valNum, inputUnit) {
   if(inputUnit === 'feet')
    metresEl.value = valNum/3.2808;
   if(inputUnit === 'meter')
    feetsEL.value = valNum * 3.2808;
}


<div class="container">
    <div class="form-group">
      <label>Feet</label>
      <input type="number" id="inputFeet" placeholder="Feet" oninput="LengthConverter(this.value,"feet")" onchange="LengthConverter(this.value,"feet")" >
    </div>
    <div class="form-group">
      <label>Metres</label>
      <input type="number" id="inputMetres" placeholder="Metres" oninput="LengthConverter(this.value,"meter")" onchange="LengthConverter(this.value,"meter")" >
    </div>
  </div>

【讨论】：

我认为使用像ID这样的第二个参数非常强大，如果我有多个输入，我选择这个选项。这比拥有很多功能要好。谢谢

【解决方案2】：

添加了逆变换：

let metresEl = document.getElementById('inputMetres');
let feetEl = document.getElementById('inputFeet');


function FeetToMetres(valNum) {
    metresEl.value = valNum/3.2808;
}

function MetresToFeet(valNum) {
    feetEl.value = 3.2808*valNum;
}

  <div class="container">
    <div class="form-group">
      <label>Feet</label>
      <input type="number" id="inputFeet" placeholder="Feet" oninput="FeetToMetres(this.value)" onchange="FeetToMetres(this.value)" >
    </div>
    <div class="form-group">
      <label>Metres</label>
      <input type="number" id="inputMetres" placeholder="Metres" oninput="MetresToFeet(this.value)" onchange="MetresToFeet(this.value)">
    </div>
  </div>

【讨论】：

感谢您的回答，您的代码完美运行，非常清晰。
@Furax 如果你想说声谢谢，请点赞

【解决方案3】：

您可以为每个输入添加element.addEvenetListener，当您有机会获得它的价值时，转换并放入正确的输入。

let metresEl = document.getElementById('inputMetres');
let feetsEl = document.getElementById('inputFeets');

metresEl.addEventListener('change', yourCode);
feetsEl.addEventListener('change', yourCode);

例如，如果仪表输入发生变化，则转换为英尺并添加到英尺输入。

【讨论】：

您好，谢谢您的回答，但代码不起作用！ metresEl.addEventListener('change', valNum => metresEl.value = valNum/3.2808); feetsEl.addEventListener('change', valNum => feetsEl.value = valNum*3.2808);我做到了，但我什么也没得到