I am making a basic game, and I have a tile system that I'm using. Each tile has an ID of "tileX", where X is a number (ex. tile1). I have a function as follows:

window.onclick = function() {
    var x = event.clientX, y = event.clientY,
    elementMouseIsOver = document.elementFromPoint(x, y).id;
    document.getElementById("tileTell").value = elementMouseIsOver;
    console.log(elementMouseIsOver);
    console.log(typeof(elementMouseIsOver));
    elementMouseIsOver = parseInt(elementMouseIsOver);
    console.log(elementMouseIsOver);
    console.log(typeof(elementMouseIsOver));
}

Line 4 of code there fills in an input field so I can visually see which tile I've clicked (I'm using this to make sure things are working properly and so I can find the tiles I need). That works fine. On line 5 when I do a console.log, it gives me the proper ID, and verifies that it is a string.

After that I want to reset the elementMouseIsOver variable to be an integer, so if the ID was tile1 I would expect the new result to be 1. But when I look at it in the console, I get NaN. And then when I check the type of it immediately after that, I get number.

The parseInt does not seem to be working properly, what am I doing wrong? I need to use the ID names of each tile for mathematical operations so this is vital to my game. I know it's probably a really dumb mistake but I am pletely at a loss...

I am making a basic game, and I have a tile system that I'm using. Each tile has an ID of "tileX", where X is a number (ex. tile1). I have a function as follows:

window.onclick = function() {
    var x = event.clientX, y = event.clientY,
    elementMouseIsOver = document.elementFromPoint(x, y).id;
    document.getElementById("tileTell").value = elementMouseIsOver;
    console.log(elementMouseIsOver);
    console.log(typeof(elementMouseIsOver));
    elementMouseIsOver = parseInt(elementMouseIsOver);
    console.log(elementMouseIsOver);
    console.log(typeof(elementMouseIsOver));
}

Line 4 of code there fills in an input field so I can visually see which tile I've clicked (I'm using this to make sure things are working properly and so I can find the tiles I need). That works fine. On line 5 when I do a console.log, it gives me the proper ID, and verifies that it is a string.

After that I want to reset the elementMouseIsOver variable to be an integer, so if the ID was tile1 I would expect the new result to be 1. But when I look at it in the console, I get NaN. And then when I check the type of it immediately after that, I get number.

The parseInt does not seem to be working properly, what am I doing wrong? I need to use the ID names of each tile for mathematical operations so this is vital to my game. I know it's probably a really dumb mistake but I am pletely at a loss...

• javascript
• parseint

• "1" might be an integer string that can be parseInt'd, but "tile1" definitely is not. Try parseInt(elementMouseIsOver.slice(4), 10) – Bergi Commented May 15, 2015 at 2:38

5 Answers 5

If you want parseInt() to work on strings in the way you're using it, it has to start with a digit; in your case, it starts with alphabetical characters, and so (with an implicit radix of 10) it will rightfully return NaN.

You could get the number out by using a generic method:

var num = +(elementMouseIsOver.match(/\d+/) || [])[0];

It matches the first group of digits it can find and then uses the unary plus operator to cast it into an actual number value. If the string doesn't contain any digits, it will yield NaN.

In your particular case, you could also apply parseInt() on the part that immediately follows "tile":

var num = +elementMouseIsOver.substr(4);

NaN is correct.

https://developer.mozilla/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt

If parseInt encounters a character that is not a numeral in the specified radix, it ignores it and all succeeding characters and returns the integer value parsed up to that point.

Nothing parsed successfully.

EDIT

You could acplish what you want by removing the non-numeric characters from the string, assuming you'll always have a string+integer as the ID. Try this:

parseInt(elementMouseIsOver.replace(/[^\d]/,""))

You need to remove the "tile" string first, so it can properly parse the value:

elementMouseIsOver = parseInt(elementMouseIsOver.substring("tile".length));

• .substring("tile".length) returns a substring starting with the character after "tile" (position 4 in the string, count starts at 0), resulting in only the number of the ID (as a string).

fiddle: http://jsfiddle/rk96uygd/

The typeof of a NaN is number.

Use isNaN() to test if a value is NaN or Not a Number https://developer.mozilla/en/docs/Web/JavaScript/Reference/Global_Objects/isNaN

You could also use the Number() cast instead of parseInt().

you trying to parseInt on a element ID that is non-numeric, when parse fail it will return NaN (*or not a number*)

elementMouseIsOver = parseInt(elementMouseIsOver);

moreover, your elementMouseIsOver is an ID of control, I don't think .value can get the value of control

elementMouseIsOver = document.elementFromPoint(x, y).id;