Bootstrap 表单输出错误结果

Question

尽管没有被 linked（据我所知），当输入摄氏数时，华氏公式将 运行 并应用到摄氏输出，正确的公式被输出到华氏度输出，输入华氏度数时反之亦然。

图片 我已经尝试了几个 if 语句，但它们似乎只适用于其中一个输出，而另一个根本没有任何值结果。

**HTML//Bootstrap**

<div class="form-group">
   <div class="input-group">
      <span class="input-group-addon">C°</span>
         <input type="number" class="form-control" id="cAmount" placeholder="Celsius">
    </div>
</div>

<div class="form-group">
   <div class="input-group">
      <span class="input-group-addon">F°</span>
        <input type="number" class="form-control" id="fAmount" placeholder="Fahrenheit">
    </div>
</div>              





<div class="form-group">
  <div class="input-group">
     <span class="input-group-addon">Celsius Temperature</span>
       <input type="number" class="form-control" id="celsius-result" disabled>

   </div>
</div>

<div class="form-group">
   <div class="input-group">
      <span class="input-group-addon">Fahrenheit Temperature</span>
        <input type="number" class="form-control" id="f-res" disabled>

    </div>
</div>

**Javascript**

let formSubmit = document.querySelector('#tempCalculator')

formSubmit.addEventListener('submit', runEvent);

function runEvent(e) {
let celInput = document.querySelector('#cAmount');
let fahInput = document.querySelector('#fAmount');
let celResult = document.querySelector('#celsius-result')
let fahResult = document.querySelector('#f-res');


//input

let fahVal = parseFloat((celInput.value * 9/5) + 32);

let celVal = parseFloat((fahInput.value - 32) * 5/9);

//output

celResult.value = celVal.toFixed(2);

fahResult.value = fahVal.toFixed(2);

//stop form refreshing
e.preventDefault();

}

预期只是在相应的输出中出现一个正确的值，确实发生了，但意外的输出中出现了一个错误的值。

这是完整应用程序的代码笔 link：https://codepen.io/str-99/pen/NmwXJz

Answer 1

如果我对你的理解正确，这是完成你正在尝试的一种方法：

let formSubmit = document.getElementById('tempCalculator');

formSubmit.addEventListener('submit', runEvent);

function runEvent(e) {
    let celInput = document.querySelector('#cAmount');
    let fahInput = document.querySelector('#fAmount');
    let celResult = document.querySelector('#celsius-result')
    let fahResult = document.querySelector('#f-res');

    //input
    let fahVal = parseFloat((celInput.value * 9/5) + 32);

    let celVal = parseFloat((fahInput.value - 32) * 5/9);

    //output

    celResult.value = Number(fahInput.value) > 0 ? celVal.toFixed(2) : '';

    fahResult.value = Number(celInput.value) > 0 ? fahVal.toFixed(2) : '';

    //reset input boxes
    document.getElementById('cAmount').value = '';
    document.getElementById('fAmount').value = '';

    e.preventDefault();
}

三元运算符非常适合这种情况。当它不是 right/desired 输入时，我们可以简单地将值更改为空字符串。并在每次计算后将输入框清除到 'reset' 添加度量。