UncaughtTypeError：无法调用null的方法“ getElementByTagName”

Question

I am developing a website in asp.net. I used a GridView edited with RadioButton. This is the code for the GridView. Along with this RadioButton GridView is getting value from a table in DataBase and it contains 3 columns.

<asp:GridView ID="creditGridView" runat="server"  Width="500" Height="210px"  GridLines="None" CssClass="classGridView" >
                   <Columns>
                       <asp:TemplateField HeaderText="Pick One">
                           <ItemTemplate>
                               <asp:RadioButton ID="radBatId" runat="server" onclick= "javascript:CheckOtherIsCheckedByGVID(this);" />
                           </ItemTemplate>
                       </asp:TemplateField>
                   </Columns>
</asp:GridView>

And I used JavaScript to make the functionality, select one RadioButton at a time in GridView. This is the JavaScript code:

function CheckOtherIsCheckedByGVID(rdBtn) {
        var currentRdBtnId = rdBtn.id;
        alert(currentRdBtnId);
        var parent = document.getElementById("<%=creditGridView.ClientID%>");

    var items = parent.getElementsByTagName("input");
    for (i = 0; i < items.length; i++) {
        if (items[i].id != currentRdBtnId && items[i].type == "radio") {
            if (items[i].checked) {
                items[i].checked = false;
            }
        }
        else {
            document.getElementById("<%=radioBtnIndex.ClientID%>").value = i;
        }
    }
}

When I put this function in the same page containing the GridView it is working fine. When I put this function in a separate JavaScript file it is showing the error

UncaughtTypeError:Cannot call method 'getElementByTagName' of null

Here variable parent is getting the value null . ie the statement document.getElementById("<%=creditGridView.ClientID%>"); is not getting the GridView id when the function is not in the same page. Can anyone help me solve this issue or give me an alternate way to access the GridView id?

Answer 1

You can't use expressions like <%=creditGridView.ClientID%> in separate js file. If such expression placed just on aspx page it evaluated during page rendering and replaced with calculated value (eg client id of gridview control). But as separate file doesn't precessed by asp.net it left as it is. You may mark GridView with some css class and use css class selectors in separeate js file to get GridView.