ASP.Net JScript Error on Show Hide using IE8

I am getting the following javascript error when changing the value in the dropdownlist. The error only occurs when using IE8, it works fine in IE6 and IE7. The error is: 'value' is null or not an object

Here is the code.

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder2" Runat="Server">
    <table cellpadding="3" cellspacing="1">
        <tr>
            <td style="text-align: right">* Who is reporting the issue:</td>
            <td>
                <asp:DropDownList ID="ddlWhoReportedIssue" runat="server" 
                    CausesValidation="false">
                    <asp:ListItem></asp:ListItem>
                    <asp:ListItem>Self</asp:ListItem>
                    <asp:ListItem>Agent's Office</asp:ListItem>
                    <asp:ListItem>Other Employee In Dept.</asp:ListItem>
                </asp:DropDownList>
            </td>
        </tr>
        <tr id = "Row1" style="display:none">
            <td style="text-align: right">* State Agent Code:</td>
            <td>
                <asp:TextBox ID="txtStateAgentCode" runat="server" Columns="20" MaxLength="50"></asp:TextBox>
            </td>
        </tr>
        <tr id = "Row2" style="display:none">
            <td style="text-align: right">* Name of Caller:</td>
            <td>
                <asp:TextBox ID="txtNameOfCaller" runat="server"></asp:TextBox>
            </td>
        </tr>
        <tr id = "Row3" style="display:none">
            <td style="text-align: right">* Name &amp; Alias of Other Employee:</td>
            <td>
                <asp:TextBox ID="txtNameAndAlias" runat="server" Columns="30" MaxLength="50"></asp:TextBox>
            </td>
        </tr>
    </table>

 开发者_如何学运维   <script type="text/javascript">

        function fcnShowHide1() {
            if (aspnetForm.ctl00_ContentPlaceHolder2_ddlWhoReportedIssue.value == "Self") {
                document.all.Row1.style.display = "none"
                document.all.Row2.style.display = "none"
                document.all.Row3.style.display = "none"
               } else if (aspnetForm.ct100_ContentPlaceHolder2_ddlWhoReportedIssue.value == "Agent's Office") {
                document.all.Row1.style.display = ""
                document.all.Row2.style.display = ""
                document.all.Row3.style.display = "none"
               } else if (aspnetForm.ct100_ContentPlaceHolder2_ddlWhoReportedIssue.value == "Other Employee In Dept.") {
                document.all.Row1.style.display = "none"
                document.all.Row2.style.display = "none"
                document.all.Row3.style.display = ""
            }
        }

    </script>

</asp:Content>

Change the function to this:

function fcnShowHide1() {
    var oDDL = document.getElementById("<%=ddlWhoReportedIssue.ClientID%>");
    var sValue = oDDL.value;
    if (sValue == "Self") {
        document.getElementById("Row1").style.display = "none";
        document.getElementById("Row2").style.display = "none";
        document.getElementById("Row3").style.display = "none";
    } else if (sValue == "Agent's Office") {
        document.getElementById("Row1").style.display = "";
        document.getElementById("Row2").style.display = "";
        document.getElementById("Row3").style.display = "none";
    } else if (sValue == "Other Employee In Dept.") {
        document.getElementById("Row1").style.display = "none";
        document.getElementById("Row2").style.display = "none";
        document.getElementById("Row3").style.display = "";
    }
}

Hard coding the dynamically generated ID is really bad idea - get the real ID using ClientID.

Plus document.all is even worse, use document.getElementById instead.