Javascript Logic error?

I have an IF ELSE and I do not understand the logic JS is using. The code is regarding a player level system. The player needs a certain number of experience points in order to gain a level.

In the case where the player does not have enough XP to gain the level I have the following IF ELSE conditional:


if(playerXP<playerXPNeededNextLevel){ // player doesnt have enough XP to level
document.getElementById('pushbutton').innerHTML='<img src="http://www.domain.com/img/icons/icon_levelmeupdisabled.gif" />';
document.getElementById('playerNextLevelStatus').style.color = 'red';
}else{
// level up the user
}


Interestingly if the playerXP = 99 XP and the XP needed to level is 25 XP or 50XP everything works fine (the player levels and the "Level Up" icon button doesn't disable.

However, if the player has XP with the first number of the XP value being lower than the XP needed to level then the IF conditional is satisfied and the icon is disabled.

Example 1:
playerXP = 561
playerXPNeededNextLevel = 51

- pass - this makes sense
------------------------



Example 2:
playerXP = 461
playerXPNeededNextLevel = 51

- fail! (why? because 5 > 4 ) - this is the only pattern I can identify


-------------------------
Example 3:
playerXP = 461000000000000000
playerXPNeededNextLevel = 51

- fail! (why? because 5 > 4 )- this is the only pattern I can identify

strange, no?

I use alert()'s to check and double check for errors.. I can't find any.... the logic isn't making sense.

I flipped around the IF ELSE statement just for fun and the same thing happens:


if(playerXP>playerXPNeededNextLevel){ // player does have enough XP to level
// level up the user
}else{
document.getElementById('pushbutton').innerHTML='<img src="http://www.domain.com/img/icons/icon_levelmeupdisabled.gif" />';
document.getElementById('playerNextLevelStatus').style.color = 'red';
}


I am using XHR to perform the level up (firebug to debug, and everything looks to be as expected from the server response)

same problem happens... everything works fine until:


playerXP = 5308765
playerXPNeededNextLevel = 60

and the level button is disabled -- it would appear that it is disabled because it is only comparing the first number in the set of integers (6>5 so disable the level up button)... when really 60<5308765 so it shouldn't disable the button

has anyone else had a problem with this?

I flipped around the IF ELSE statement just for fun and the same thing happens:


if(playerXP>playerXPNeededNextLevel){ // player does have enough XP to level
// level up the user
}else{
document.getElementById('pushbutton').innerHTML='<img src="http://www.domain.com/img/icons/icon_levelmeupdisabled.gif" />';
document.getElementById('playerNextLevelStatus').style.color = 'red';
}


I am using XHR to perform the level up (firebug to debug, and everything looks to be as expected from the server response)

same problem happens... everything works fine until:


playerXP = 5308765
playerXPNeededNextLevel = 60

and the level button is disabled -- it would appear that it is disabled because it is only comparing the first number in the set of integers (6>5 so disable the level up button)... when really 60<5308765 so it shouldn't disable the button

has anyone else had a problem with this?
I guess playerXP, playerXPNeededNextLevel, both or one of them, are strings and not compared as two numbers. check this first, :)

best regards

no, they are defined as integers

thanks for thinking of that.. but i dont think this is the problem

no, they are defined as integers

thanks for thinking of that.. but i dont think this is the problem
did you check them just before that if statement? sometimes you could push in a array an integer and retrive a string, :)

best regards