console.log string is empty if isNaN is not a number or a string

Question

I am having an issue with the empty string else if statement for some reason even if I submit an empty string I get that my empty string is still a number even if it is not true or false its just an empty string I just want JS to detect that if the .value is empty to tell the user it is empty simply.

function isNotANumber() {
  let isNan = document.querySelector("#nan");

  if (isNaN(isNan.value) == true) {
  console.log(isNan.value + " is not a number");
  }
  else if (isNaN(isNan.value) == false){
    console.log(isNan.value + " is a number");
  }
 else if ( isNan.value == ""){
 console.log("nothing to submit");
  }
}

body {
  padding: 0;
  margin: 0;
  background: #518688;
}
b {
  color: darkturquoise;
}
input,button{
  padding:5px;
  boder:none;
  outline:none;
  
}

<main id="NaN">
  <input id="nan" type="text"><button onclick="isNotANumber()">submit</button>
</main>

Answer 1

isNaN will cast non-numeric arguments to numbers. If the argument can be converted to a number which is not NaN, it'll return false.

The empty string can be converted into a meaningful number: specifically, 0:

console.log(Number('') === 0);

which is why isNaN(isNan.value) is returning false in such a case.

If you want to require the values to be numbers, use type="number" as an attribute.

If you want to permit any sort of string, but distinguish between numeric strings and non-numeric strings, I'd check that if the value satisfies ^\d+(?:\.\d+)$ - digits, followed optionally by a decimal point and more digits.

function isNotANumber() {
  const val = document.querySelector("#nan").value;
  if (/^\d+(?:\.\d+)?$/.test(val)) {
    console.log('number');
  } else {
    console.log('not a number');
  }
}

body {
  padding: 0;
  margin: 0;
  background: #518688;
}
b {
  color: darkturquoise;
}
input,button{
  padding:5px;
  boder:none;
  outline:none;
  
}

<main id="NaN">
  <input id="nan" type="text"><button onclick="isNotANumber()">submit</button>
</main>

Answer 2

You need to move your else if (isNan.value == "") to the top, so that way you're checking if it's empty before the others. Ideally, you'd want move it to the top, so it's the first thing you check.

Answer 3

Add if (isNan.value.trim() == "") { to very first condition. Also use isNan.value.trim() == "" so it will also handle text with white space only.

Please refer Why does isNaN(" ") (string with spaces) equal false?

function isNotANumber() {
  let isNan = document.querySelector("#nan");

  // Use below condition as first condition.
  // Also use .trim() so it will also handle text with white space only
  if (isNan.value.trim() == "") {
    console.log(isNan.value + " is not a number");
  } else if (isNaN(isNan.value) == false) {
    console.log(isNan.value + " is a number");
  } else if (isNaN(isNan.value) == true) {
    console.log("nothing to submit");
  }
}

body {
  padding: 0;
  margin: 0;
  background: #518688;
}

b {
  color: darkturquoise;
}

input,
button {
  padding: 5px;
  boder: none;
  outline: none;
}

<main id="NaN">
  <input id="nan" type="text"><button onclick="isNotANumber()">submit</button>
</main>

Answer 4

From the docs:

When the argument to the isNaN function is not of type Number, the value is first coerced to a Number. The resulting value is then tested to determine whether it is NaN. Thus for non-numbers that when coerced to numeric type result in a valid non-NaN numeric value (notably the empty string and boolean primitives, which when coerced give numeric values zero or one), the "false" returned value may be unexpected; the empty string, for example, is surely "not a number."

A solution is to use Number.isNan() instead.