document.getelementbyId始终返回null

Question

我在设置面板可见性时遇到问题

但是在更改JavaScript时返回空引用异常。

  

JavaScript运行时错误：无法获取未定义或空引用的属性'setAttribute'

我想根据单选按钮（TrMarketingDetails）的变化使面板RbMarketing可见。

的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代码

<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"

你只需改变

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";
        }
    }

您已经在代码中使用了jquery语法，然后通过jquery语法（如

）做到这一点很好

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

Check this link with same question