Question

我试图创建一个带有两个输入（摄氏和华氏）的简单转换计算器。我想调整脚本以便如果一个输入被清除，它也将清除另一个输入。这是目前发生的事情的截图。

Image of two inputs for conversion calculator

我已尝试过多个if语句来检查其中一个或另一个是否为空或＃34;＆＃34;，如果是，则将value设置为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网址：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);
  }
}

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。华氏温度也是如此。

你也可以在开头添加所有检查，清除所有字段，然后返回：

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

＆＃13;

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

＆＃13;

@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;
}

＆＃13;

<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>

＆＃13;

Answer 3

你可以使用jQuery（它更容易）实现这一点，但如果你愿意，也可以用JavaScript实现。你需要做的是什么 1）确定值是否为"undefined"
2）如果值未定义，则清空另一个输入值

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

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

3 个答案: