show div onchange of dropdownlist value using javascript

I have a dropdownlist and I want to show a div onchange event using javascript but it says object required

aspx code

<asp:DropDownList runat="server" ID="lstFilePrefix1" onchange="showTR();" >
    <asp:ListItem Text="Prefix1" Value="Prefix1" />
    <asp:ListItem Text="Prefix2" Value="Prefix2" />
    <asp:ListItem Text="Prefix3" Value="Prefix3" />
    <asp:ListItem Text="Prefix1 and Prefix2" Value="Prefix1 and Prefix2" />
    &开发者_高级运维lt;asp:ListItem Text="Prefix2 and Prefix3" Value="Prefix2 and Prefix3" />
</asp:DropDownList>

and javascript code inside .js file

function showTR() {
    var dropdown = document.getElementById( "<%=lstFilePrefix1.ClientID%>" ); // Get a reference to the dropdown (select) element
    var selectedItemValue = dropdown.options[ dropdown.selectedIndex ].value; // use the dropdown reference to get the selected item's value
    var div2 = document.getElementById( "data" ); // Get a reference to div2

    if( selectedItemValue == 'Prefix2' ) {
        div2.style.dispaly= "block";// If the selectedItemValue is 'Action', show div2
    } else {
        div2.style.display = "none"; // Otherwise, hide div2
    }
}

Well I might be mistaken but JavaScript doesn't accept asp code. Unless of course you are outputting inside.js as asp with the correct header. Also you have a typeo at div2.style.dispaly

function showTR() {
    var dropdown = document.getElementById( "#anID" ); // Get a reference to the dropdown (select) element
    var selectedItemValue = dropdown.options[ dropdown.selectedIndex ].value; // use the dropdown reference to get the selected item's value
    var div2 = document.getElementById( "data" ); // Get a reference to div2

    if( selectedItemValue == 'Prefix2' ) {
        div2.style.display = "block";// If the selectedItemValue is 'Action', show div2
    } else {
        div2.style.display = "none"; // Otherwise, hide div2
    }
}

Use

div2.style.visibility = "visible";

or

div2.style.visibility = "hidden";