CODEWITHSUNDEEP
javascripthtmlif-statement
Karl
Karl

Reputation: 83

isNaN doesnt seem to be working correctly

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

Upvotes: 0

Views: 103

Answers (6)

user2575725
user2575725

Reputation:

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>

Upvotes: 0

sk8terboi87 ツ
sk8terboi87 ツ

Reputation: 3457

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.

Upvotes: 0

Mujtaba Kably
Mujtaba Kably

Reputation: 755

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;

Upvotes: 0

Bachcha Singh
Bachcha Singh

Reputation: 3934

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>

Upvotes: 2

Om Sao
Om Sao

Reputation: 7653

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>

Upvotes: 0

Mμ.
Mμ.

Reputation: 8542

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>

Upvotes: 1

Related Questions