My console.log keeps saying NaN is false while it isn't

Question

So I have this code and when the user types a number it should log "this is a valid number" in the console and else it should log "this is not a valid number". But my code keeps logging "this is a valid number". And I have to use isNaN.

Please be easy on me, I'm just starting JavaScript.

This is my HTML code:

  <!doctype html>
<html>

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


    <script src="postcode.js">
 </script>
</head>

<body>

<form class="form">
  <label for="postcode">Postcode: </label>
  <input type="text" id="postcode">
</form>

</body>

</html>

And this is my JavaScript code:

window.addEventListener("load", init);

  function init() {
    alert("Content loaded");

    var nameInput = document.getElementById('postcode');

    document.querySelector('form.form').addEventListener('submit', function (e) {

      //prevent the normal submission of the form
      e.preventDefault();



        if (nameInput === isNaN || nameInput === "") {
          console.log("this is not a valid number!");}
        else if (nameInput !==  isNaN) {
          console.log("this is a valid number!");}

    });

    }

I think you want [Validate decimal numbers in JavaScript - IsNumeric()](http://stackoverflow.com/questions/18082/validate-decimal-numbers-in-javascript-isnumeric) — Oriol, Jun 04 '16 at 22:16
`nameInput` is a **DOM element**. It will never be equal to the function `isNaN` nor to the string `''`. — Felix Kling, Jun 04 '16 at 22:16
Always read documentation if you are using something unfamiliar: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/isNaN — Felix Kling, Jun 04 '16 at 22:19

adeneo · Answer 1 · 2016-06-04T22:18:59.367

2

There's something in javascript called NaN (Not A Number), then there's a function that checks if something is NaN appropriately called isNaN().

You're checking if your variable is the exact same as the isNaN function, which of course it's not, as nameInput is an object, or more correctly a HTML input element.

What you want is probably to get the value of the input, and check if it's "Not A Number", or just an empty string (which seems like an uneccessary check here)

if (isNaN(nameInput.value) || nameInput.value === "") {

edited Jun 04 '16 at 22:18

answered Jun 04 '16 at 22:14

adeneo

312,895
29
395
388

1

`isNaN('\t') == false`. But a tab is not a number. Neither `isNaN` nor `Number.isNaN` can validate numeric strings. – Oriol Jun 04 '16 at 22:18
@Oriol: That's because `Number('\t')` is `0`. Whitespace has to be treated separately (trimming the string should work too though). But very good point. I wonder if the OP considers `'0xA5'` to be a valid input. – Felix Kling Jun 04 '16 at 22:20
How would you get a tab as an inputs value ? – adeneo Jun 04 '16 at 22:26
@adeneo Probably not with the tab key, but for example by pasting. – Oriol Jun 04 '16 at 22:37

score 1 · Accepted Answer · answered Jun 04 '16 at 22:14

1

Use isNaN(...) to check if a something is Not A Number:

isNaN('a'); // true

And also nameInput refers to a DOM node, get the value (or innerHTML):

isNaN(nameInput.value)

And your full code:

window.addEventListener("load", init);

function init() {
    var nameInput = document.getElementById('postcode');
    document.querySelector('.form').addEventListener('submit', function (e) {
        e.preventDefault();
        if (!nameInput.value || isNaN(nameInput.value)) {
            console.log("this is not a valid number!");}
        else {
            console.log("this is a valid number!");}
        }
    });
}

answered Jun 04 '16 at 22:14

Andreas Louv

46,145
13
104
123

Is there also a possibility to check if that valid number is bigger than 1000 and smaller than 9999? – M.MFG Jun 04 '16 at 22:50
`if (nameInput.value > 1000 && nameInput.value < 9999)` ? – Andreas Louv Jun 04 '16 at 22:51
great, thank you! I always forget to put '.value' behind it – M.MFG Jun 04 '16 at 22:54
Store it in a variable an call it `nameValue` ? `var nameValue = nameInput.value;` – Andreas Louv Jun 04 '16 at 22:56

score 0 · Answer 3 · answered Jun 04 '16 at 22:27

isNaN is a function. If you do nameInput === isNaN, you check if nameInput is pointing to the function isNaN. What you want to do, is to call the function: isNaN(nameInput).

Also nameInput is a HTML DOM Element. You first have to get the value from it: nameInput.value

Just do:

if (isNaN(nameInput.value)) {
    console.log("this is not a valid number!");}
else {
    console.log("this is a valid number!");
}

My console.log keeps saying NaN is false while it isn't

3 Answers3