Clear one input if other input has no value

Question

I'm trying to create a simple conversion calculator with two inputs (Celsius and Fahrenheit). I want to adjust the script so that if one input is cleared, it will clear the other input too. Here is a screenshot of what happens at the moment.

Image of two inputs for conversion calculator

I've tried a number of if statements to check if one or the other is null or "", and if so then set value to null, but that doesn't work.

Any help or tips would be appreciated.

and the HTML is:

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

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

If you prefer, here is my Codepen url : http://codepen.io/coetzercreative/pen/WxXBEK

Answer 1

You need to check if celsius or farenheit are numbers. So you converter may look like this.

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

Your function should work like this:

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 the calculation is for celsius, then it checks if it is an empty value by doing: if (!celsius) { ... }

When a value is empty or undefined, this evaluates to false. The same is repeated with fahrenheit.

You could also just add all of the checking at the beginning, clear all fields, and return to get out:

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

You can achieve this with jQuery (it is easier) but also in JavaScript if you prefer. What you need to do is
1) determine whether the value is "undefined"
2) if value is undefined, empty the other input value

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