isNaN giving confusing results

Question

I am writing a HTML form that does some simple calculation if the input is a number. However, my number input is not being regarded by the javascript function as a number. I am confused why this is so and did some testing with jsFiddle using the following code

HTML

<form>
 <input name=a type=number value='' oninput='checka();'>
 <input name=b type=number value='' oninput='checkb(this);'>
</form>

Javascript

function checka() {
 alert(isNaN(document.forms[0].a.value));
}

function checkb(A) {
 alert(isNaN(this.value));
}

I am dumbfounded by the result. The checka function works normally giving false when '5' is entered and true when 'a' is entered. However, the checkb function gives true for both cases.

I understand from Mozilla documentation that isNaN function may do type conversion first before checking the input whether it is a number or not:

Confusing special-case behavior

Since the very earliest versions of the isNaN function specification, its behavior for non-numeric arguments has been confusing. When the argument to the isNaN function is not a 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." The confusion stems from the fact that the term, "not a number", has a specific meaning for numbers represented as IEEE-794 floating-point values. The function should be interpreted as answering the question, "is this value, when coerced to a numeric value, an IEEE-794 'Not A Number' value?"

How does this help to explain the phenomenon that I am seeing? Or is this another form of confusion not related to type conversion?

Don't you mean `A.value` in `checkb` ? – Alex K. Aug 06 '12 at 15:36 — Alex K., Aug 06 '12 at 15:36

score 8 · Accepted Answer · edited May 23 '17 at 12:27

8

this (when you call checkb) is window…

(You call checkb(this) without a parent object (foo.checkb) so the context is window automatically. For further reading, see How does “this” keyword work within a JavaScript object literal?.)

…so this.value is window.value which is (presumably) undefined and thus is not a number.

You don't do anything with the this that you pass to checkb() — the function doesn't do anything with any of its arguments.

You probably meant:

function checkb(A) {
 alert(isNaN(A.value));
}

edited May 23 '17 at 12:27

Community

1
1

answered Aug 06 '12 at 15:34

Quentin

914,110
126
1,211
1,335

sorry, why is `this` `window` and not `input`? – Question Overflow Aug 06 '12 at 15:36
But, I didn't make the same mistake in the HTML form I am working on. Don't know what is wrong. – Question Overflow Aug 06 '12 at 15:43

score 1 · Answer 2 · answered Aug 06 '12 at 15:35

this.value is undefined, this is the window object, not the input.

If you want to use this to point to the input, you need to assign the event handlers in an unobtrusive manner.

<form>
 <input name=b type=number value='' id="b">
</form>

<script>    
 function checkb(A) {
  alert(isNaN(this.value));
 }    
 document.getElementById("b").oninput = checkb;  //better to use an addEventListener
</script>

isNaN giving confusing results

2 Answers2