javascript - 如果其他输入没有值，则清除一个输入

Question

我正在尝试创建一个具有两个输入(摄氏度和华氏度)的简单转换计算器。我想调整脚本，以便如果一个输入被清除，它也会清除另一个输入。这是目前发生的情况的屏幕截图。

Image of two inputs for conversion calculator

我已经尝试了很多 if 语句来检查一个或另一个是否为 null 或 ""，如果是，则将值设置为 null，但这不起作用。

如有任何帮助或提示，我们将不胜感激。

HTML 是:

<input type="text" id="cVal" placeholder="celsius" onkeyup="convert('C')">
<input type="text" id="fVal" placeholder="fahrenheit" onkeyup="convert('F')">

和Javascript:

function convert(degree) {
    var celsius = document.getElementById("cVal").value;
    var fahrenheit  = document.getElementById("fVal").value;

    if (degree == "C") {
        if (celsius === null || "") {
            fahrenheit = null;
        }
        else {
            var calcFah = celsius * 9/5 + 32;
            document.getElementById("fVal").value = Math.round(calcFah);
        }

    }
    else {
        if (fahrenheit === null || "") {
            celsius = null;
        }

        else {
            var calcCel = (fahrenheit - 32) * 5/9;
            document.getElementById("cVal").value = Math.round(calcCel);
        }
    }
}

如果您愿意，这是我的 Codepen url:http://codepen.io/coetzercreative/pen/WxXBEK

Answer 1

您需要检查 celsius 或 farenheit 是否为数字。所以你的转换器可能看起来像这样。

function convert(degree) {
  var celsius = document.getElementById("cVal");//.value;
  var fahrenheit  = document.getElementById("fVal");//.value;

  if (degree == "C") {
    if (celsius.value == '' || Number(celsius.value) == Math.NaN) {
    //note that Number('') == 0
      fahrenheit.value = "";
      return;
    } 

        var calcFah = celsius.value * 9/5 + 32;
        fahrenheit.value = Math.round(calcFah);
  }
  else {
    if (fahrenheit.value == '' || Number(fahrenheit.value) == Math.NaN) {
      celsius.value = "";
      return;
    }

    var calcCel = (fahrenheit.value - 32) * 5/9;
    celsius.value = Math.round(calcCel);
  }
}