string in php vs. string in javascript - php

Question

Here is a simple code I have problem with:
<label id="label1">
<?php
echo "Text inside label1";
?>
</label>
<script language="JavaScript" type="text/javascript">
var text = document.getElementById("label1").innerHTML;
alert(text); // show what's in variable 'text'
if(text == "Text inside label1")
{
alert("I am inside.");
}
else
{
alert("No.");
}
</script>
The problem is that the first alert is showing "Text inside label1"(as it should do) but the second one is showing "No.". When I tried to write text right into html (not through php), it worked fine => the second alert showed "I am inside.". I have no idea what problem is there. Could there be the problem with some differences between string types (php vs. JS) or something like this?
Thanks for any ideas

Answer 1

There is a space at the beginning of the text in the label (all whitespace in HTML is collapsed into one space), but not at the beginning of the string you're comparing it with.
Your PHP code:
<label id="label1">
<?php
echo "Text inside label1";
?>
</label>
...will get sent to the browser like this (PHP will strip the line break after the ?> for you):
<label id="label1">
Text inside label1</label>
...which is just like
<label id="label1"> Text inside label1</label>
(Note the space.)
So this should fix it:
<label id="label1"><?php
echo "Text inside label1";
?></label>

Answer 2

JavaScript has no knowledge of PHP. There is no difference of types or anything. The page that is output is the page that is output. Look at the difference between doing it statically and via PHP.
I suspect you're having an issue with the whitespace surrounding the text you're echoing.

Answer 3

The innerHTML in your example seems to contain a line break:
<label id="label1"> <-- Line break
<?php
echo "Text inside label1";
?> <-- PHP strips this line break
</label>
That's why text == "Text inside label1" doesn't match. Try instead:
<label id="label1"><?php echo "Text inside label1" ?></label>

Answer 4

The problem is, that text contains also the linebreaks and whitespace inside #label.
This works as expected:
<label id="label1"><?php
echo "Text inside label1";
?></label>
<script language="JavaScript" type="text/javascript">
var text = document.getElementById("label1").innerHTML;
alert(text); // show what's in variable 'text'
if(text == "Text inside label1")
{
alert("I am inside.");
}
else
{
alert("No.");
}
</script>

Answer 5

The issue with this may be that the label contains extra spaces and new line characters. The better approach maybe indexof:
var str = "Text inside label1";
if(str.indexOf(text) != -1)
{}

Answer 6

As said below, the problem is the spacing of a new row.
You can fix that by either doing
<label id="label1"><?php
echo "Text inside label1";
?></label>
Or you could just trim the string with jQuery.trim, or add your own prototype such as
String.prototype.trim = function () {
return this.replace(/^\s*/, "").replace(/\s*$/, "");
}
myString.trim();