getElementById not finding control generated by ASP.net

Question

I am simply trying to store a label in a variable in javascript but for some reason this isn't working with document.getElementById('control'); . I know my javascript is linking to my html file fine because everything else works.

Here is my javascript code:

function performEvapCooledCircuit(txt)
{
    var error = document.getElementById('lblError');


    if (txt.value == null || isNaN(txt.value))
    {
       error.style.visibility = "visible";
    }
}

Here is the html code for my label:

<asp:Label ID="lblError" class="NormLabel" runat="server" 
   style="color:red; visibility:hidden;" Text="Invalid Input."></asp:Label>

I am getting an error that says object expected??

Answer 1

The ID that ASP.NET will generate will not be "lblError" so you'll need to reference it by its ClientID

document.getElementById('<%=lblError.ClientID %>');

---

If your javascript file is external I've usually had to write a type of "Init" javascript method to make sure my ID's were set up property

On your ASPX page:

<script type="text/javascript">
    var lblError = null;
    function InitializeVariables()
    {
        if (lblError == null) // make sure you only do this once
        {
            lblError = document.getElementById("<%=lblError.ClientID %>");
        }
    }
</script>
<asp:Label 
    ID="lblError"
    class="NormLabel"
    runat="server" 
    style="color:red; visibility:hidden;"
    Text="Invalid Input."></asp:Label>

Then in your javascript file you'll have to call InitializeVariables() to make sure you've got the variables pointing to the proper asp.net controls

function performEvapCooledCircuit(txt)
{
    InitializeVariables();

    if (txt.value == null || isNaN(txt.value))
    {
        lblError.style.visibility = "visible";
    }
}

Answer 2

"hunter" gives a pretty solid way of doing things, however a, in my opinion far better method is to use the "CliendIDMode" property on the control and set that property to "Static". This will make the client and server IDs the same. Like this:

<asp:TextBox ID="ServerAndClientId" runat="server" ClientIDMode="Static" />

Answer 3

The ID of the label is not "lblError". The ASP.net engine changed the ID. Check the HTML source code in the browser to find out the real ID.

Answer 4

You can use this:

document.getElementById('<%= lblError.ClientID %>').click()

Starting from ASP.NET 4.0 you can use ClientIDMode property for you element. And if you set it into Static then the ClientID value will be set to the value of the ID property:

 <asp:Label ID="lblError" runat="server" ClientIDMode="Static" />

will be rendered as something like this:

<span id="lblError" name="ctl00$MasterPageBody$ctl00$Label1" />

Answer 5

That's not HTML for the label, that is an ASP.NET Control which will be rendered into HTML before it is sent in the response. ASP.NET WebForms controls sometimes change the id for the HTML they create.

View the source of the webpage to see what the id for the HTML element is on the rendered page.