javascript - 引导表单输出错误结果

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

标签： javascripthtmlbootstrap-form-helper

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();
}

三元运算符非常适合这种情况。当它不是正确/期望的输入时，我们可以简单地将值更改为空字符串。并且对于添加的措施，在每次计算后清除输入框以“重置”。