document.getelementbyId始终返回null

Question

I am having trouble setting panel visibility

but on change JavaScript returning null reference exception.

JavaScript runtime error: Unable to get property 'setAttribute' of undefined or null reference

I want to make panel TrMarketingDetails visible based on a radio button ( RbMarketing ) change.

JavaScript

function trVisible(val) {
    var selected = $("#" + val.id + " input:radio:checked").val();
    if (selected == "1") {
        document.getElementById('<%=TrMarketingDetails.ClientID %>').setAttribute("style", "visibility: visible");
        document.getElementById('<%= hfdMarket.ClientID %>').value = 'Y';
    }
    else if (selected == "2") {
        document.getElementById('<%=TrMarketingDetails.ClientID %>').setAttribute("style", "visibility: hidden");
    }
}

AXPX Code

<tr>
    <td style="font-weight: bold" align="left" class="style4">
        Marketing facilities available
    </td>
    <td style="font-weight: bold" class="style23">
        <asp:RadioButtonList ID="RbMarketing" runat="server" DataTextField="Yes" onchange="trVisible(this);"
            RepeatDirection="Horizontal">
            <asp:ListItem Text="Yes" Value="1"></asp:ListItem>
            <asp:ListItem Text="No" Value="2"></asp:ListItem>
        </asp:RadioButtonList>
        <asp:HiddenField ID="hfdMarket" runat="server" />
        <%--OnSelectedIndexChanged="RbMarketing_SelectedIndexChanged" AutoPostBack="True"--%>
    </td>
</tr>
<asp:Panel ID="TrMarketingDetails" runat="server" Style="visibility: hidden" EnableViewState="true">
    <tr>
        <%--visible="false"--%>
        <td runat="server" style="border: none;" class="style7" align="left">
            Details :
        </td>
        <td runat="server" style="border: none;" class="style26" align="left">
            <asp:TextBox ID="TextMarketingDetails" runat="server" CssClass="textboxCss" autocomplete="off"
                MaxLength="100" Enabled="True" ondrop="return false;" Width="300px" TextMode="MultiLine"></asp:TextBox>
            <asp:RequiredFieldValidator ID="Requiredfieldvalidator49" runat="server" Display="None"
                ControlToValidate="TextMarketingDetails" ValidationGroup="grp1" ForeColor="#F00000"
                SetFocusOnError="true" ErrorMessage="Please enter Marketing details" Enabled="false"></asp:RequiredFieldValidator>
            <asp:ValidatorCalloutExtender ID="ValidatorCalloutExtender3" runat="server" PopupPosition="Right"
                TargetControlID="Requiredfieldvalidator49">
            </asp:ValidatorCalloutExtender>
        </td>
    </tr>
</asp:Panel>

Answer 1

W3C link for style.visibility

document.getElementById("controlid").style.visibility = "hidden"

you just change like

function trVisible(val) {

        var selected = $("#" + val.id + " input:radio:checked").val();
        if (selected == "1") {
            document.getElementById('<%=TrMarketingDetails.ClientID %>').style.visibility = "visible";
            document.getElementById('<%= hfdMarket.ClientID %>').value = 'Y';
        }
        else if (selected == "2") {
            document.getElementById('<%=TrMarketingDetails.ClientID %>').style.visibility = "hidden";
        }
    }

You are already use jquery syntax in your code, then good to do this via jquery syntax like

$('#<%=TrMarketingDetails.ClientID %>').show();
$('#<%=TrMarketingDetails.ClientID %>').hide();

Check this link with same question