Javascript parseInt not working on a string, trying to get an integer from an HTML value

Question

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 completely at a loss...

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

Ja͢ck · Accepted Answer · 2015-05-15 02:54:54Z

4

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

edited May 15, 2015 at 2:54

answered May 15, 2015 at 2:37

Ja͢ck

174k39 gold badges269 silver badges316 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jimp · Accepted Answer · 2015-05-15 02:41:25Z

2

NaN is correct.

https://developer.mozilla.org/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 accomplish 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]/,""))

edited May 15, 2015 at 2:41

answered May 15, 2015 at 2:35

jimp

17.6k3 gold badges30 silver badges39 bronze badges

Comments

myfunkyside · Accepted Answer · 2015-05-15 02:54:35Z

0

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.net/rk96uygd/

edited May 15, 2015 at 2:54

answered May 15, 2015 at 2:40

myfunkyside

3,9601 gold badge21 silver badges33 bronze badges

Comments

Downgoat · Accepted Answer · 2015-05-15 03:05:31Z

0

The typeof of a NaN is number.

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

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

edited May 15, 2015 at 3:05

Downgoat

14.4k7 gold badges48 silver badges72 bronze badges

answered May 15, 2015 at 2:39

user2081518

7466 silver badges7 bronze badges

3 Comments

Ja͢ck Over a year ago

Number("tile1") also yields NaN.

user2081518 Over a year ago

it have same behavior as parseInt

user2081518 Over a year ago

you can parse to number "texts" but numbers in form of string. w3schools.com/jsref/jsref_parseint.asp Use something like elementMouseIsOver = (typeof elementMouseIsOver==='string' ? 1 : elementMouseIsOver)

Yu Yenkan · Accepted Answer · 2015-05-15 03:09:27Z

0

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;

edited May 15, 2015 at 3:09

answered May 15, 2015 at 2:41

Yu Yenkan

7652 gold badges9 silver badges33 bronze badges

1 Comment

Ja͢ck Over a year ago

NaN doesn't represent null; NaN is a Number type whereas null is a Null type and its representative value.

Collectives™ on Stack Overflow

Javascript parseInt not working on a string, trying to get an integer from an HTML value

5 Answers 5

Comments

Comments

Comments

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related