Why is javascript unable to get asp:Label innerText?

Question

I have two labels: username and email. I use them to retrieve their content and pass them as method parameters.

var lblEmail = $get('<%= lblEmail.ClientID %>');
var email = lblEmail.innerText;

var lblUsername = '<%= lblUsername.ClientID %>';
var username = lblUsername.innerText;

The email label is defined in the same way as username label does, but for this last I can't get the value, innertext returns undefined.

...

<td class="inputField">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<asp:Label ID="lblUsername" CssClass="font1" runat="server"/>
</tr>
</table>
</td>

...

...
<td class="inputField">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<asp:Label runat="server" ID="lblEmail" CssClass="font1" />
</td>
...

What could be a possible reason to justify what is happening? How can I solve this problem? I'm seeing on the page both label values, I set them on the same place (when page loads).

Answer 1

Because you defined only the client ID for the userName label :

var lblEmail = $get('<%= lblEmail.ClientID %>');
var email = lblEmail.innerText;

var lblUsername = '<%= lblUsername.ClientID %>';
var username = lblUsername.innerText;

Answer 2

In the second part of your code

var lblEmail = $get('<%= lblEmail.ClientID %>');
var email = lblEmail.innerText;

var lblUsername = '<%= lblUsername.ClientID %>';
var username = lblUsername.innerText;

$get call is absent. Should be

var lblEmail = $get('<%= lblEmail.ClientID %>');
var email = lblEmail.innerText;

var lblUsername = $get('<%= lblUsername.ClientID %>');
var username = lblUsername.innerText;

Answer 3

What Alexander said. The javascript should be:

var lblEmail = $get('<%= lblEmail.ClientID %>'); var email = lblEmail.innerText;

var lblUsername = $get('<%= lblUsername.ClientID %>'); var username = lblUsername.innerText;