javascript - getElementByID() for web user control not working? - Stack Overflow

admin管理员组

文章数量:1324849

I have made a web user control (.ascx) which consists of the two html textbox and two input buttons, when I try to do document.getElementById('<%=ControlID.ClientID%>') it returns null. what could i have done wrong ?

source code:

<script language="javascript" type="text/javascript">

    function intilize() {
        var x = document.getElementById('<%=JSNumeric_Control.ClientID%>');
    }

</script>

<table class="style1">
    <tr>
        <td >
        <My:UserInfoBoxControl ID="JSNumeric_Control" runat="server" />
            </td>
        <td>
            &nbsp;</td>
    </tr>
    <tr>
        <td colspan="2" style="text-align: center">
            <input id="Button1" type="button" value="button" onclick="intilize()" /><br />
            </td>
    </tr>
</table>

Here is the code for the Numbric.cs, the following are the property used and in page load i am using JavaScript to assign all the events for the HTML inputs:

public partial class NumricCounter : System.Web.UI.UserControl
    {
        public string defualtValue = "0";
        public double defaultIncrementValue = 1;
        public int defaultPrecsionValue = 0;

        public string Button_Add_ClientID
        {
            get { return Button_Add.ClientID; }
        }

        public string Button_Subtract_ClientID
        {
            get { return Button_Subtract.ClientID; }
        }

        //Set and Get for all these properties. (Code Omitted)
        public string Text;

        public double IncrementValue;

        public int PrecsionValue;

        public void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                Text_Output.Value = this.Text;
                Button_Add.Attributes.Add("onclick", "Add(" + IncrementValue.ToString() + "," + PrecsionValue.ToString() + ");");
                Button_Subtract.Attributes.Add("onclick", "Subtract(" + this.IncrementValue.ToString() + "," + this.PrecsionValue.ToString() + ")");
                Text_Output.Attributes.Add("onkeyup", "check(" + this.PrecsionValue.ToString() + ");");
            }
        }
    }

I have made a web user control (.ascx) which consists of the two html textbox and two input buttons, when I try to do document.getElementById('<%=ControlID.ClientID%>') it returns null. what could i have done wrong ?

source code:

<script language="javascript" type="text/javascript">

    function intilize() {
        var x = document.getElementById('<%=JSNumeric_Control.ClientID%>');
    }

</script>

<table class="style1">
    <tr>
        <td >
        <My:UserInfoBoxControl ID="JSNumeric_Control" runat="server" />
            </td>
        <td>
            &nbsp;</td>
    </tr>
    <tr>
        <td colspan="2" style="text-align: center">
            <input id="Button1" type="button" value="button" onclick="intilize()" /><br />
            </td>
    </tr>
</table>

Here is the code for the Numbric.cs, the following are the property used and in page load i am using JavaScript to assign all the events for the HTML inputs:

public partial class NumricCounter : System.Web.UI.UserControl
    {
        public string defualtValue = "0";
        public double defaultIncrementValue = 1;
        public int defaultPrecsionValue = 0;

        public string Button_Add_ClientID
        {
            get { return Button_Add.ClientID; }
        }

        public string Button_Subtract_ClientID
        {
            get { return Button_Subtract.ClientID; }
        }

        //Set and Get for all these properties. (Code Omitted)
        public string Text;

        public double IncrementValue;

        public int PrecsionValue;

        public void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                Text_Output.Value = this.Text;
                Button_Add.Attributes.Add("onclick", "Add(" + IncrementValue.ToString() + "," + PrecsionValue.ToString() + ");");
                Button_Subtract.Attributes.Add("onclick", "Subtract(" + this.IncrementValue.ToString() + "," + this.PrecsionValue.ToString() + ")");
                Text_Output.Attributes.Add("onkeyup", "check(" + this.PrecsionValue.ToString() + ");");
            }
        }
    }

• javascript
• asp

Share Improve this question Follow edited Dec 15, 2011 at 14:24 yahya kh asked Dec 15, 2011 at 12:59 yahya khyahya kh 75133 gold badges1111 silver badges2323 bronze badges 9

• where did you put "document.getElementById('<%=ControlID.ClientID%>')" can you post the webform code ? – remi bourgarel Commented Dec 15, 2011 at 13:01
• have you checked the rendered page source to see if the controls that you expected to be rendered were? Also providing source would make it easier for us to help answer the question. – Ken Henderson Commented Dec 15, 2011 at 13:02
• 1 Which element are you expecting to get returned by that? I wouldn't expect that to return the textboxes or input buttons... What is the HTML output of your control (ie post rendering) and what is the value of ControlID.ClientID that it is trying to look up? I'm thinking that the clientID is probably only goign to appear as a prefix for those other elements. – Chris Commented Dec 15, 2011 at 13:02
• You don't need to use script language attribute – Nikoloz Shvelidze Commented Dec 15, 2011 at 13:04
• I am trying to add an event using javascript on both the input buttons inside the user control. – yahya kh Commented Dec 15, 2011 at 13:04

 |  Show 4 more ments

5 Answers 5

Sorted by: Reset to default 3

Try replacing your function:

function intilize() {
        var x = document.getElementById('<%=JSNumeric_Control.ClientID%>');
    }

with this:

function intilize() {
        var x = document.getElementById('JSNumeric_Control');
    }

The getElementById should read the ID of the element from the rendored html.

JSNumeric_Control.ClientID will return the ClientID of the control if it were rendered to the page. It's existance doesn't necessarily mean that there will be HTML on the final page that has that ID.

For example if you create a control that just outputs two buttons you will give each of those buttons different IDs that are not the same as the control that they live in. Often you might create a container div that you will put around all other content which you will give the ID of the Control to for easy finding but there is no reason for this to exist.

What you should do is either make sure that your control does create this HTML container with the ID of your control or you should refer specifically to the client ID of the items inside your control.

var button1 = document.getElementById('<%=JSNumeric_Control.Button1.ClientID%>');

The problem is that in the DOM there's no element with Id = ClientID of your UserInfoBoxControl. The controls inside your user control will have other Ids, like 'JSNumeric_Control_Button1', 'JSNumeric_Control_TextBox1' etc. If you need to get both of the input buttons, you can do one of the following:

1. Use jquery selector to find all inputs with type = button and id starting with <%=JSNumeric_Control.ClientID%>

2. Add two new properties to your control - FirstButtonClientID and SecondButtonClientID that will provide you with clientIDs of your buttons. Then you can use it in javascript.

3. Create custom javascript object which will represent your usercontrol and provide necessary functionality.

You are most likely trying to search the DOM before it's been loaded. Try putting your code inside an onload handler:

document.onload = function () {
    alert(document.getElementById('<%=ControlID.ClientID%>'));
}

This makes sure that the code isn't executed before you actually have all of the DOM loaded.

//Button_Add is the control id inside the user control
var x = document.getElementByID(JSNumeric_Control.FindControl("Button_Add").ClientID);

本文标签： javascriptgetElementByID() for web user control not workingStack Overflow