无法在JavaScript中访问带有ClientIdMode =“ static”的Asp.net Web表单用户控件

Question

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" eg

<%@ Control Language="C#" AutoEventWireup="true"
CodeBehind="QuestionUserControl.ascx.cs"
Inherits="Kids.Math.Presentation.UserControls.QuestionUserControl"     ClientIDMode="Static" %>

In the form that I am using it I also set Id as:

 <uc2:QuestionUserControl runat="server" ID="QuestionUserControl1" ClientIDMode="Static" />

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 eg ctl00$MainContent$QuestionUserControl1$txtQuestion ...

Not sure why the user control Id is not appearing?

Any comments will be appreciated ...

Update: user control mark up (Please forgive the inline markup styles as it is only a test version ...)

    <%@ Control Language="C#" AutoEventWireup="true"
    CodeBehind="QuestionUserControl.ascx.cs"
    Inherits="Kids.Math.Presentation.UserControls.QuestionUserControl" ClientIDMode="Static" %>

<style type="text/css">
    .auto-style1 {
        width: 100%;
    }
</style>

<div runat="server" style="Width:100%; Height:100%;" class="panel-body panel-question" ClientIDMode="Static" id="pnlQuestion">

    <div runat="server" style="Width:100%; Height:100%;" ClientIDMode="Static" ID="pnlTextbox">
        <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"></asp:TextBox>
        <asp:TextBox CssClass="textarea" TextMode="MultiLine"
            Height="100%" ID="txtQuestion" runat="server"
            BackColor="Black" ReadOnly="True" Width="100%"
            Font-Size="X-Large" ForeColor="White"></asp:TextBox>
    </div>
    <div style="Width:100%; Height:30%;">

        <table class="auto-style1">
            <tr>
                <td>
                    <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" />
                </td>
                <td>
                    <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" />
                </td>
                <td>
                    <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" />`enter code here`
                </td>
            </tr>
        </table>

    </div>

    <asp:HiddenField ID="HiddenField1" runat="server" />
</div>

Answer 1

ctl00$MainContent$QuestionUserControl1$txtQuestion is from a asp tag having id txtQuestion or something similar.

This is not an answer, because poor markup was shared in question I will suggest to do this:

Wrap you usercontrol

<%@ Control Language="C#" AutoEventWireup="true"
CodeBehind="QuestionUserControl.ascx.cs"
Inherits="Kids.Math.Presentation.UserControls.QuestionUserControl"%>
<asp:Placeholder id="uniqueID" runat="server" ClientIDMode="static">
<!-- your asp tags inside user control -->
</asp:Placeholder>

Now check your html if you find a div with id="uniqueID" -> that's your first tag created by user control.

Answer 2

I finally ended up with this word around: - Added a new button to the user control called it incorrect answer - In javascript once the countdown timer is over - I did a postback for this new button ie __doPostBack("InCorrectAnswer", "");

And then inside the user control I decided on what to be done when InCorrectAnswer is clicked ... which basically meant finalise the process.

This worked for me Fine.