string comparison fails in Javascript

Question

I'm using Alert() just to make sure I have a match between 'Login' and the innerHTML of an element on the page.

var statusElement = document.getElementById('logged-in-status');
var currentLoggedInStatus = statusElement.innerHTML;

    alert("innerHTML is: " + currentLoggedInStatus);

When the alert box pops up, it says: innerHTML is: Login

    var stringComp = (currentLoggedInStatus == "Login");
    alert("stringComp is: " + stringComp);

When this 2nd alert box pops up, it says: stringComp is: false

So the code inside this 'if' statement ERRONEOUSLY executes. I don't see how the first alert() clearly says the innerHTML is 'Login' and yet the code inside the 'if' statement goes right ahead and executes. I tried single-quotes around 'Login' and it did not help.

    if(currentLoggedInStatus != "Login")
    {
       navBarLoginStatusTextElement.innerHTML = 'Login';
    }

To reiterate, the innerHTML = Login and when I compare innerHTML to Login it says they're not the same!

Why is my javascript comparison above failing?

EDIT: here is the block element and the php function that sets the value of 'Login':

<a id="logged-in-status" 
       href="http://localhost/myProj/justAfile.php"><?php echo getLoginStatusStr();?> </a>

and in a php block is the function:

 function getLoginStatusStr()
 {
      return 'Login';
 }

Please JSFiddle the code, or link to it if possible. I would possibly suggest that the innerHTML is actually 'Login ' rather than 'Login'... So change your debug alert to alert("stringComp is: '" + currentLoggedInStatus + "'"); to verify this please. — AlanFoster
– AlanFoster, Commented Jan 2, 2012 at 9:38
What you get when you have this instead? var stringComp = (currentLoggedInStatus.indexOf("Login") >= 0); — user447356
– user447356, Commented Jan 2, 2012 at 9:44
Your link #logged-in-status seems to end with a whitespace, just as @AlanFoster suspected. Trim it before you compare it. — Stefan
– Stefan, Commented Jan 2, 2012 at 9:50

AlanFoster · Accepted Answer · 2012-01-02 09:48:57Z

3

Please JSFiddle the code, or link to it if possible. I would possibly suggest that the innerHTML is actually 'Login ' rather than 'Login'... So change your debug alert to alert("stringComp is: '" + currentLoggedInStatus + "'"); to verify this please.

Posted my original comment as an actual answer.

Edit: As i thought,

href="http://localhost/myProj/justAfile.php"><?php echo getLoginStatusStr();?> </a>

See the white space? Delete it so that it looks like

 href="http://localhost/myProj/justAfile.php"><?php echo getLoginStatusStr();?></a>

edited Jan 2, 2012 at 9:48

answered Jan 2, 2012 at 9:41

AlanFoster

8,3245 gold badges38 silver badges52 bronze badges

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

3 Comments

wantTheBest Over a year ago

I added the block code and the inline php function that sets the text also in my original question above. I'm thinking based on everyone's comments it is the lone space right before the closing </a>

AlanFoster Over a year ago

@wantTheBest Yep, I changed my post before you commented to confirm this :)

wantTheBest Over a year ago

Thanks Alan. Been writing code since the 1980s. I used to say "once you've learned a couple languages they're all very similar' and "I'm past the stage of spending lots of time chasing something that ends up being one bad character." Dagnabbit. I'm giving everyone who mentioned the whitespace an up-arrow and accepting this one. Thanks all.

Udo G · Accepted Answer · 2012-01-02 09:48:03Z

3

As the others said, there is probably an extra white space in your HTML code. Try triming it:

function trim(str) {
  return str.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
}

var stringComp = (trim(currentLoggedInStatus) == "Login");

That said, I advise you not to check HTML code contents for your logic - you never know what browsers (or scripts) do to your code. Better use a dedicated status variable or something like that.

answered Jan 2, 2012 at 9:48

Udo G

13.2k16 gold badges64 silver badges94 bronze badges

3 Comments

wantTheBest Over a year ago

Thanks I appreciate the advice there. The challenge is that by the time the page processes my code above, the navigation bar html has already been sent by the server by way of a require_once "navBarTopOfEveryPage.php" -- by the time the code above executes the 'Login' element has already appeared and the above code changes the 'Login' after the fact. Gotta be a better way. My navBar php file uses a session variable to keep track of the 'logged in status.'

Udo G Over a year ago

Not sure if I understand what your navBarTopOfEveryPage.php exactly does, but perhaps it could write a <script language="JavaScript">var logged_in=<?=$_SESSION["is_logged_in"]?"true":"false"?>;</script> code snippet to replicate the status in the JavaScript world.

wantTheBest Over a year ago

Good gosh I'm there, thanks for that tip Udo -- my approach is hugely inelegant and kludgey, I'm going to take your advice, that was a big help, thanks, it's been a long night on this, I really appreciate it!

Alnitak · Accepted Answer · 2012-01-02 09:39:54Z

1

You've probably got some extra whitespace in the original string, which is invisible in alert() but will cause the comparison to fail.

answered Jan 2, 2012 at 9:39

Alnitak

341k72 gold badges420 silver badges503 bronze badges

Comments

plus- · Accepted Answer · 2012-01-02 09:49:33Z

1

String.prototype.trim = function() {
a = this.replace(/^\s+/, '');
return a.replace(/\s+$/, '');
};

and then var currentLoggedInStatus = statusElement.innerHTML.trim();

answered Jan 2, 2012 at 9:49

plus-

46.7k16 gold badges63 silver badges74 bronze badges

Comments

Darshan Puranik · Accepted Answer · 2012-04-25 14:43:05Z

0

I also think you have some extra white spaces in your string. The simplest way to check this using alert is to add length of the string to alert message. This way you can see which of the string contain the white space/s if any.

I found one more problem when I was dealing with similar problem. If your incoming string is null terminated then trim functions will not work. You can use slice function to get rid of null terminator.

edited Apr 25, 2012 at 14:43

answered Apr 25, 2012 at 14:18

Darshan Puranik

1,0833 gold badges14 silver badges37 bronze badges

Collectives™ on Stack Overflow

string comparison fails in Javascript

5 Answers 5

3 Comments

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related