isNaN doesnt seem to be working correctly

Question

can someone tell me why the below code wont work and provide a possible fix. When the button is hit I want it to display either correct or incorrect based on whether the user entered a number into the input field.

HTML:

<!DOCTYPE html>
<body>
<p>Enter name:</p>
<input type="text" name="name"></input>
<button onclick="checkpeople()"  type = "button">check</button><br>
<p id="message"></p>
<script src="script.js"></script>
</body>

JS:

function checkpeople() {
var name = "";
if (isNaN(name)) {
name = "incorrect"
}
 else {
  name = "correct"
 }
document.getElementById('message').innerHTML = name;
}

The argument you pass to `isNaN()` is always an empty string from the `name` variable, *not* the value entered by the user, so your function will always display `"correct"`. You could get the value from the input in a similar way to how you set the `.innerHTML` for the output element, except using the `.value` property of the input. (And by the way, once you've changed your code to get the value from the input, be aware that `isNaN()` returns `false` if you pass it an empty string.) — nnnnnn, Apr 13 '17 at 02:16

score 2 · Answer 1 · answered Apr 13 '17 at 02:50

isNaN() returns true when data is not number.

function checkpeople() {
var name = document.getElementById('myinput').value;
if (isNaN(name)) {
name = "correct"
}
 else {
  name = "incorrect"
 }
document.getElementById('message').innerHTML = name;
}

<!DOCTYPE html>
<body>
<p>Enter name:</p>
<input type="text" name="name" id="myinput"></input>
<button onclick="checkpeople()"  type = "button">check</button><br>
<p id="message"></p>
</body>

score 1 · Answer 2 · answered Apr 13 '17 at 02:27

The problem is that the variable name in the checkPeople function is not linked whatsoever to the input tag in your html. You need to grab the value of the input tag in the checkPeople function. I've provided working code below:

function checkpeople() {
var name = document.getElementById('myinput').value;
if (isNaN(name)) {
name = "incorrect"
}
 else {
  name = "correct"
 }
document.getElementById('message').innerHTML = name;
}

<!DOCTYPE html>
<body>
<p>Enter name:</p>
<input type="text" name="name" id="myinput"></input>
<button onclick="checkpeople()"  type = "button">check</button><br>
<p id="message"></p>
</body>

I also suspect that the correct and incorrect should be around the other way. I _assume_ that the intent is for a number to be incorrect for a name. as isNaN will return true for text that would be 'correct' — andrewf, Apr 13 '17 at 04:28

Om Sao · Answer 3 · 2017-04-13T02:45:42.010

isNAN(<argument>) is a function to tell whether given argument is illegal number. isNaN typecasts the arguments into Number type. If you want to check if argument is Numeric or not? Please use $.isNumeric() function in jQuery.

That is, isNaN(foo) is equivalent to isNaN(Number(foo)) It accepts any strings having all numerals as numbers for obvious reasons. For ex.

isNaN(123) //false
isNaN(-1.23) //false
isNaN(5-2) //false
isNaN(0) //false
isNaN('123') //false
isNaN('Hello') //true
isNaN('2005/12/12') //true
isNaN('') //false
isNaN(true) //false
isNaN(undefined) //true
isNaN('NaN') //true
isNaN(NaN) //true
isNaN(0 / 0) //true

jQuery.isNumeric(): https://api.jquery.com/jQuery.isNumeric/ If you are peculiar about not using jQuery and doint it solely with javascript. You can use as follow: isNan(parseInt(<argument>)) or isNan(parseFLoat(<argument>))

isNumber = function(obj){
  

  

    if (!isNaN(parseInt(obj))) {
  // Is a number
  return true;
}
else return false;
}

var num = 14;
var textnum = '14';
var text = 'yo';
var nan = NaN;

var DOM = document.getElementById("demo").innerHTML;
document.getElementById("demo").innerHTML =  isNumber(textnum, true);

<p id="demo"></p>

*"Unless another tag for a framework/library is also included, a pure JavaScript answer is expected"* - From the "javascript" tag info. But in any case the behaviour of the `isNaN()` function is not the main problem with the OP's code. — nnnnnn, Apr 13 '17 at 02:20

score 0 · Answer 4 · answered Apr 13 '17 at 02:57

First of all isNaN stands for is Not a Number, therefore,

isNaN(12234) //will be false

While

isNaN("jsjsjw")// will return true.

So conditions in your code should be reversed. That is if you want your name not to be numeric.

Secondly your code doesn't connect your input, you need to get value from input before you check it in js.

function checkpeople() {
var name = document.getElementById('myinput').value;
if (isNaN(name)) {
  name = "correct"
}
else {
  name = "incorrect"
}
document.getElementById('message').innerHTML = name;

score 0 · Answer 5 · edited May 23 '17 at 12:32

Use isInteger. Its much better than isNaN.

Number.isInteger(0);         // true
Number.isInteger(1);         // true
Number.isInteger('10');      // false

Following are some problem with using isNaN.

document.write(isNaN("")) // false
document.write(isNaN(" "))  // false
document.write(isNaN(0))  // false
document.write(isNaN(null)) // false
document.write(isNaN(false))  // false
document.write("" == false)  // true
document.write("" == 0)  // true
document.write(" " == 0)  // true
document.write(" " == false)  // true
document.write(0 == false) // true
document.write(" " == "") // false

If you require support for Internet explorer, you can use polyfills.

Use Native JavaScript as much as possible. You can much learning curve with JavaScript also less dependency with any other frameworks.

score 0 · Answer 6 · answered Apr 13 '17 at 03:00

You have not picked the value entered from text-box, instead you are simply comparing a blank string.

var name = "";
if (isNaN(name)) {

Below is working example:

function checkpeople() {
  // changed variable name, as there is global variable already defined i.e. `window.name`
  var name_ = document.getElementsByName("name")[0].value;
  if (!name_ || isNaN(name_)) { // if not empty and not a number
    name_ = "incorrect"
  } else {
    name_ = "correct"
  }
  document.getElementById('message').innerHTML = name_;
}

<p>Enter name:</p>
<input type="text" name="name" />
<button onclick="checkpeople()" type="button">check</button><br>
<p id="message"></p>

isNaN doesnt seem to be working correctly

6 Answers6