0x800a138f - JavaScript runtime error: Unable to get property 'style' of undefined or null reference

0

I am getting a JavaScript

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

error when running the following code.
The part that it balks at is lblSatisfyQuarterEndDate.style.display = "none"; If I remove that part it runs fine. I want to get the textbox and the Label to disappear then the value is False.

HTML

<div class="tdControl col-xl-6 nowrap">
     <asp:DropDownList ID="ddlSatisfyQuarterEnd_ID" runat="server" onchange="dd_changed()" ClientIDMode="Static" >
        <asp:ListItem  Selected="True" Value="-1">-- Select one --</asp:ListItem>
        <asp:ListItem Value="False">No</asp:ListItem>
        <asp:ListItem Value="True">Yes</asp:ListItem>
     </asp:DropDownList>

     <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="ddlSatisfyQuarterEnd_ID" CssClass="ValidatorFailedImage" Display="Dynamic" ToolTip="Is Required" InitialValue ="-1" />
</div>
</div>
<div class="col-xl-4 col-lg-4">

<div class="tdLabel col-xl-6  nowrap">
   <asp:label ID="lblSatisfyQuarterEndDate" runat="server" Text=" Satisfy Quarter End Requirement Date:" />
</div>
<div class="tdControl col-xl-6  nowrap">
</div>

JavaScript

var ddlSatisfyQuarterEnd_ID = document.getElementById("ddlSatisfyQuarterEnd_ID").value;
var ddlSatisfyQuarterEndDate = document.getElementById("ddlSatisfyQuarterEndDate");
var lblSatisfyQuarterEndDate = document.getElementById("lblSatisfyQuarterEndDate");


function dd_changed() {
    var ddlSatisfyQuarterEnd_ID = document.getElementById("ddlSatisfyQuarterEnd_ID").value;
    switch (ddlSatisfyQuarterEnd_ID) {
        case "True":
            ddlSatisfyQuarterEndDate.style.display = "inline";

            break;
        case "False":
            ddlSatisfyQuarterEndDate.style.display = "none";
            lblSatisfyQuarterEndDate.style.display = "none";
            break;
        default:
            ddlSatisfyQuarterEndDate.style.display = "none";
javascript
asp.net
asked on Stack Overflow Jun 28, 2016 by user1910150 • edited Jun 28, 2016 by Alex Kudryashev

1 Answer

0

Never trust ID's you see in .aspx markup. Look at generated HTML code in browser.
Also you can improve situation binding ID's on server side. Here is example:

var ddlSatisfyQuarterEnd_ID = document.getElementById('<%#ddlSatisfyQuarterEnd_ID.ClientID%>').value;
var ddlSatisfyQuarterEndDate = document.getElementById('<%#ddlSatisfyQuarterEndDate.ClientID%>');
var lblSatisfyQuarterEndDate = document.getElementById('<%#lblSatisfyQuarterEndDate.ClientID%>');
answered on Stack Overflow Jun 28, 2016 by Alex Kudryashev

User contributions licensed under CC BY-SA 3.0