does number zero work as " " in javascript?

Question

document.getElementById("Btn1").onclick = function() {
  var aa = document.getElementById("fInput").value;
  var a = Number(aa);
  var bb = document.getElementById("sInput").value;
  var b = Number(bb);
  if (a == "" || b == "") {
    alert("Fill both inputs");
  } else if (a < 1 || a > 3 || b < 1 || b > 3) {
    alert(" Fields can only contain values ' 1 & 2 & 3 ' ");
  } else if (a == b) {
    alert("Not Possible !!");
  } else {
    var myArray = ['frBox', 'snBox', 'thirdBox'];
    var id1 = myArray[a - 1];
    var id2 = myArray[b - 1];
    Swap(id1, id2);
  }
}

function Swap(id1, id2) {
  var x = document.getElementById(id1).innerHTML;
  var y = document.getElementById(id2).innerHTML;
  document.getElementById(id1).innerHTML = y;
  document.getElementById(id2).innerHTML = x;
}

.fBox {
  height: 100px;
  width: auto;
  background-color: yellow;
  color: green;
}

.sBox {
  height: 100px;
  width: auto;
  background-color: aqua;
  color: black;
}

.thBox {
  height: 100px;
  width: auto;
  background-color: rgba(23, 84, 244, 0.4);
  color: rgb(45, 65, 77);
}

button {
  height: auto;
  width: 150px;
  text-align: center;
  background-color: crimson;
  color: white;
  border-radius: 10px;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Test Page</title>
</head>

<body>
  <div class="fBox" id="frBox">
    <p>
      Hello From the first box.
    </p>
  </div>
  <div class="sBox" id="snBox">
    <p>
      JavaScript is Cool !!!
    </p>
  </div>
  <div class="thBox" id="thirdBox">
    <p>
      I am Learning JavaScript !!!
    </p>
  </div><br>
  <input id="fInput" placeholder="Num 1">
  <input id="sInput" placeholder="Num 2"><br><br>
  <button id="Btn1"> Click to Swap </button>
</body>

</html>

When I enter 0 in any of the inputs and a number between 1 and 3 in the other input and click on the button, it alerts "Fill both inputs". But I expected seeing " Fields can only contain values ' 1 & 2 & 3 ' " alert. or when I fill both inputs with 0, this issue again happens!! Does 0 work as "" in JavaScript or there is a problem in my code??

Possible duplicate of [Why javascript treats 0 equal to empty string?](https://stackoverflow.com/questions/12422064/why-javascript-treats-0-equal-to-empty-string) — Ivar, Feb 22 '19 at 12:57

score 1 · Answer 1 · answered Feb 22 '19 at 13:08

0 and "" both evaluate to false in Javascript.

var x = 0;
if (x) {
  console.log('Will not be called.');
}

var y = '';
if (y) {
  console.log('Will not be called.');
}

As some of the other answers have alluded to, there is also lazy vs strict equality, using == vs ===.

That wont fix your problem though, because you're doing var a = Number(aa);. If you enter 0 in one of your inputs, you'll get Number(0), which is 0. If you don't enter anything in one of your inputs, you'll get Number(''), which is 0.

I'd replace

if (a == "" || b == "") { ... }

with

if (!a || !b) { ... }
// shorthand version of (if a === false || b === false)
// which will be the case if a or b === 0

If 0 is entered in either input, or if either input is left empty, you'll end up with a or b being 0, which will evaluate to false.

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

Shortly:

If you use ==, yes.
To avoid it, use ===.

Longer:

== (double equals) does some weird things because

it tries to transform values to same types (in this case, to numbers), and
Number("") === 0

Conclusion:

It's better to use Strict equality operator (===) instead:

document.getElementById("Btn1").onclick = function() {
  var aa = document.getElementById("fInput").value;
  var a = Number(aa);
  var bb = document.getElementById("sInput").value;
  var b = Number(bb);
  if (aa===""||bb==="") {
    alert("Fill both inputs");
  } else if (a < 1 || a > 3 || b < 1 || b > 3) {
    alert(" Fields can only contain values ' 1 & 2 & 3 ' ");
  } else if (a == b) {
    alert("Not Possible !!");
  } else {
    var myArray = ['frBox', 'snBox', 'thirdBox'];
    var id1 = myArray[a - 1];
    var id2 = myArray[b - 1];
    Swap(id1, id2);
  }
}

function Swap(id1, id2) {
  var x = document.getElementById(id1).innerHTML;
  var y = document.getElementById(id2).innerHTML;
  document.getElementById(id1).innerHTML = y;
  document.getElementById(id2).innerHTML = x;
}

.fBox {
  height: 100px;
  width: auto;
  background-color: yellow;
  color: green;
}

.sBox {
  height: 100px;
  width: auto;
  background-color: aqua;
  color: black;
}

.thBox {
  height: 100px;
  width: auto;
  background-color: rgba(23, 84, 244, 0.4);
  color: rgb(45, 65, 77);
}

button {
  height: auto;
  width: 150px;
  text-align: center;
  background-color: crimson;
  color: white;
  border-radius: 10px;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Test Page</title>
</head>

<body>
  <div class="fBox" id="frBox">
    <p>
      Hello From the first box.
    </p>
  </div>
  <div class="sBox" id="snBox">
    <p>
      JavaScript is Cool !!!
    </p>
  </div>
  <div class="thBox" id="thirdBox">
    <p>
      I am Learning JavaScript !!!
    </p>
  </div><br>
  <input id="fInput" placeholder="Num 1">
  <input id="sInput" placeholder="Num 2"><br><br>
  <button id="Btn1"> Click to Swap </button>
</body>

</html>

does number zero work as " " in javascript?

2 Answers2

Shortly:

Longer:

Conclusion:

See more information