Javascript debugging problem

See more:

Javascript

HTML

ASP.NET4

In my aspx file,

I tried to retrieve the control values, e.g. using the piece of code below:

function onChange_Dept() {
    debugger;
    var v1 = document.getElementById('<%=TextBoxLastName%>').value;
    var v2 = document.getElementById('<%=TextBoxEmail.ClientID%>').value;
}

When I run debugging, the dynamic code is show below

function onChange_Dept() {
    debugger;
    var v1 = document.getElementById('System.Web.UI.WebControls.TextBox').value;
    var v2 = document.getElementById('ctl00_ContentPlaceHolder1_TextBoxEmail').value;
}

where the v1 is null, and v2 returns value correctly. I don't know why in the dynamic code, the TextBoxLastName is not accessed correctly.

The 2 controls in the aspx look like below:
<pre lang="HTML">
<td class="stylecol2" colspan="2">
   <asp:TextBox ID="TextBoxLastName" runat="server" class="styleTxtbox" ToolTip="Requester's Last Name"></asp:TextBox>
</td>
...
<td colspan="3" style="height: 29px">
  <asp:TextBox ID="TextBoxEmail" runat="server" class="styleTxtbox"  ontextchanged="TextBoxEmail_TextChanged" ></asp:TextBox>
  <asp:RegularExpressionValidator ID="validateEmail1" runat="server" ControlToValidate="TextBoxEMail" ErrorMessage="Invalid email" ValidationExpression="^([\w\.\-]+)@([\w\-]+)((\.(\w){2,3})+)$" ForeColor="#FF3300"></asp:RegularExpressionValidator>
</td> 
</pre>

I don't know why the 2 controls behave differently in dynamic debugging. Wish you can help me for this answer. Thanks.

What I have tried:

Got problem in JavaScript debugging and unknown why