Why is my javascript not getting the element by it

问题:

I have an aspx page and I am trying to hide a table row when the country selected in a drop down list is "US". I keep getting a null reference error (or the javascript equivalent) because it can't find one of the elements.

Here is the javascript

<script type="text/javascript">
    function cntryslct() {
        var elem = document.getElementById("staterow");
        var dropdown = document.getElementById("country");
        elem.style.display = (dropdown.value; != "US") ? "none" : "";


    };
</script>

For some reason it can't find the element "country".

Here is what "country" looks like:

<tr>
    <th class="style1"><strong>Country: </strong></th>
    <th class="style2">
        <asp:DropDownList onchange="cntryslct()" id = "country" ...>stuff</asp:DropDownList>
    </th>
</tr>

Not sure if it matters, but "country" is after "staterow", the element being hidden and shown.

Why can it not find the element by its id? Is it because the element is also the element where the script is being called?

回答1:

The ID of all of your ASPX components changes after page renderization.

You have two alternatives:

1) Set the property ClientID="Static" of your ASPX components;

2) Or get the Control.ClientID at runtime, for example:

var dropdown = document.getElementById('<%= country.ClientID %>');