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

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

您可以使用 jQuery 实现此目的（更容易），但如果您愿意，也可以使用 JavaScript 实现。你需要做的是
1）判断值是否为"undefined"
2) 如果值未定义，清空另一个输入值

if($(element1).attr("value") == "undefined"){
   $(element2).attr("value", "")
}

Answer 2

你的函数应该像这样工作：

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

  if (degree == "C") {
    if (!celsius) {
      document.getElementById("fVal").value = "";
      return;
    } 

        var calcFah = celsius * 9/5 + 32;
        document.getElementById("fVal").value = Math.round(calcFah);
  }
  else {
    if (!fahrenheit) {
      document.getElementById("cVal").value = "";
      return;
    }

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

如果计算是针对摄氏度的，那么它会通过执行以下操作检查它是否为空值： if (!celsius) { ... }

当值为空或未定义时，计算结果为 false。用华氏度重复同样的操作。

您也可以只在开头添加所有检查，清除所有字段，然后 return 退出：

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

  if ((degree === "C" && !celsius) || (degree === "F" && !fahrenheit)) {
      document.getElementById("cVal").value = "";
      document.getElementById("fVal").value = "";
      return;
  }

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

function convert(degree) {
  var celsius = document.getElementById("cVal").value;
  var fahrenheit  = document.getElementById("fVal").value;
  
  if ((degree === "C" && !celsius) || (degree === "F" && !fahrenheit)) {
      document.getElementById("cVal").value = "";
      document.getElementById("fVal").value = "";
      return;
  }
  
  if (degree == "C") {  
  var calcFah = celsius * 9/5 + 32;
  document.getElementById("fVal").value = Math.round(calcFah);
  }
  else {   
    var calcCel = (fahrenheit - 32) * 5/9;
    document.getElementById("cVal").value = Math.round(calcCel);
  }
}

@charset "UTF-8";

.calcWrap {
 position: relative;
 display: block;
 margin: 0 auto;
 width: 960px;
 height: 100px;
}

.degCont{
 display: inline-block;
 background: #f5f5f5;
 padding: 15px 30px;
 width: 43%
}

input {
 display: block;
 margin: 0 auto;
 padding: 12px 18px;
 font-family: 'Helvetica-neue', sans-serif;
 text-transform: uppercase;
 text-align: center;
}

<div class="calcWrap">
            <div class="degCont">
                <input type="text" id="cVal" placeholder="celsius" onkeyup="convert('C')">
            </div>

            <div class="degCont">
                <input type="text" id="fVal" placeholder="fahrenheit" onkeyup="convert('F')">
            </div>
        </div>

Answer 3

您需要检查 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);
  }
}

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

Clear one input if other input has no value

javascript

forms

input

calculator