title: Asp.net web form user control with ClientIdMode = "static" cannot be accessed in javascript
body: <p>I have a user control that is used inside an ASP.Net web form page. In the user control I have set the ClientIdMode = "static" e.g</p>
  
  <pre><code>&lt;%@ Control Language="C#" AutoEventWireup="true"
  CodeBehind="QuestionUserControl.ascx.cs"
  Inherits="Kids.Math.Presentation.UserControls.QuestionUserControl"     ClientIDMode="Static" %&gt;
  </code></pre>
  
  <p>In the form that I am using it I also set Id as:</p>
  
  <pre><code> &lt;uc2:QuestionUserControl runat="server" ID="QuestionUserControl1" ClientIDMode="Static" /&gt;
  </code></pre>
  
  <p>However, when run the page I am trying to access this user control in javascript either by getElementById("QuestionUserControl1")  or using JQuery $("#QuestionUserControl1") ... it doesn't work. Actually, the user control doesn't seem to be appear in the source ... when checking the source i cannot find "QuestionUserControl1" however I can find the controls inside it e.g ctl00$MainContent$QuestionUserControl1$txtQuestion ...</p>
  
  <p>Not sure why the user control Id is not appearing?</p>
  
  <p>Any comments will be appreciated ...</p>
  
  <p><strong>Update: user control mark up (Please forgive the inline markup styles as it is only a test version ...)</strong></p>
  
  <pre><code>    &lt;%@ Control Language="C#" AutoEventWireup="true"
      CodeBehind="QuestionUserControl.ascx.cs"
      Inherits="Kids.Math.Presentation.UserControls.QuestionUserControl" ClientIDMode="Static" %&gt;
  
  &lt;style type="text/css"&gt;
      .auto-style1 {
          width: 100%;
      }
  &lt;/style&gt;
  
  &lt;div runat="server" style="Width:100%; Height:100%;" class="panel-body panel-question" ClientIDMode="Static" id="pnlQuestion"&gt;
  
      &lt;div runat="server" style="Width:100%; Height:100%;" ClientIDMode="Static" ID="pnlTextbox"&gt;
          &lt;asp:TextBox ID="lblTimer" runat="server" BackColor="Black" BorderColor="Black" BorderStyle="None" BorderWidth="0px" ClientIDMode="Static" ForeColor="White" Visible="False" Width="100%" Font-Bold="True" Font-Size="Large" ReadOnly="True"&gt;&lt;/asp:TextBox&gt;
          &lt;asp:TextBox CssClass="textarea" TextMode="MultiLine"
              Height="100%" ID="txtQuestion" runat="server"
              BackColor="Black" ReadOnly="True" Width="100%"
              Font-Size="X-Large" ForeColor="White"&gt;&lt;/asp:TextBox&gt;
      &lt;/div&gt;
      &lt;div style="Width:100%; Height:30%;"&gt;
  
          &lt;table class="auto-style1"&gt;
              &lt;tr&gt;
                  &lt;td&gt;
                      &lt;asp:Button ID="Answer1" runat="server" BorderStyle="Dashed"
                          CommandName="Answer1" Width="100%" OnCommand="Question_Answered" Enabled="False" BackColor="Black" Font-Size="X-Large" ForeColor="White" /&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;asp:Button ID="Answer2" runat="server" BorderStyle="Dashed"
                          CommandName="Answer2" Width="100%" OnCommand="Question_Answered" Enabled="False" BackColor="Black" Font-Size="X-Large" ForeColor="White" /&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;asp:Button ID="Answer3" runat="server" BorderStyle="Dashed"
                          CommandName="Answer3" Width="100%" OnCommand="Question_Answered" Enabled="False" BackColor="Black" Font-Size="X-Large" ForeColor="White" /&gt;`enter code here`
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
  
      &lt;/div&gt;
  
      &lt;asp:HiddenField ID="HiddenField1" runat="server" /&gt;
  &lt;/div&gt;
  </code></pre>