如何使此转换函数双向工作

Question

我是JS的新手，我很难只使用输入完成转换器，我解释了这个问题！我们有两个输入，米和英尺。当我把一个数字传输到英尺时，我会得到以米为单位的结果。我想对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>

Answer 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>

Answer 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>

Answer 3

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

let metresEl = document.getElementById('inputMetres');
let feetsEl = document.getElementById('inputFeets');
metresEl.addEventListener('change', yourCode);
feetsEl.addEventListener('change', yourCode);

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