Search code examples
asp.netjavascriptnullgetelementbyid

ASP.NET: Why is my JavaScript object set to null?

I have a <script> that contains this line:

var tbl = document.getElementById("<%= this.tblSelection.ClientID %>");

... but tbl always ends up being set to null.

The table is declared like this:

<asp:Table ID="tblSelection" runat="server" CellPadding="2" CellSpacing="0"
    cols="1" style="position: absolute; top: 0%; right: 0%">

Both the script and the table are in the same master page file.

What could be causing this?

EDIT: I should mention that this script is executed on onload

Solution

  • I am guessing your JavaScript code is executing before your browser has a chance to fully render the table. At this point, the DOM of the page will not be complete and the getElementByID function will not be able to find the table because it doesn't exist yet!

    Do this experiment:

    <head runat="server">
<title></title>

<script language="javascript">

    function showTable() {

        var tbl = document.getElementById("<%= this.tblSelection.ClientID %>");

        alert(tbl);
    }

    showTable();

</script>

    This will show you "null" when your page first loads. If you add a button to call this method again, however, you'll see that tbl gets populated.

    <input type="button" value="CheckTable" onclick="showTable();" />