引导表格输出错误结果

Question

尽管（据我所知）没有链接，但当输入摄氏温度时，将运行并执行华氏公式，并在摄氏输出中实现，并在华氏输出上输出正确的公式，反之亦然，当输入华氏温度时数字。

图片 我尝试了几种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();

}

期望的是在相应的输出中出现一个正确的值，这确实发生，但是在意外的输出中出现了不正确的值。

以下是完整应用程序的Codepen链接：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();
}

三元运算符非常适合此类实例。如果不是正确/所需的输入，我们可以简单地将值更改为空字符串。为了增加度量，请在每次计算后清除输入框以“重置”。