Uncaught TypeError: Cannot Set Property 'onchange' Of Null

I am using a drop down for dynamically changing content on a page. It works but is throwing a js error in Chrome ONLY. What Chrome recommends I don't know how to implement. Site is

Solution 1:

There's only one possible reason for that error message, document.getElementById("drop") does not return the element, and the only reason for that is that the element doesn't exists, but in the HTML it clearly does, so the script must be running before the elements in the DOM.

You have to include the javascript after the elements in the DOM, or wrap it in a DOM ready handler, like window.onload etc.

<form method="post" action="{path='locations/index'}" class="drop">
    <select id="drop">
        <option>Select a Location:</option>{exp:channel:entries channel="locations" category="not 3" orderby="title" sort="asc" dynamic="no"}
        <option value="{site_url}index.php/locations/{url_title}">{title}</option>{/exp:channel:entries}
    </select>
</form>
<script>
    document.getElementById("drop").onchange = function() {
        if (this.selectedIndex !== 0) {
            window.location.href = this.value;
        }
    };
</script>

Solution 2:

You are running the JavaScript code before your HTML has rendered.

Solution 3:

Use document ready event

$(document).ready(function(){

 $('#drop').change(function(){ 
    if (this.selectedIndex !== 0) {
        window.location.href = this.value;
    }
 })

});

Solution 4:

You need to make sure that your connection with HTML file by tag was put at the last child of tag. Reason is here HTML must be executed first, then JS after that.