Question

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() + ");");
            }
        }
    }

Answer 1

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.