未捕获的类型错误：无法将属性“onchange”设置为 null答案

【问题标题】：Uncaught TypeError: Cannot set property 'onchange' of null未捕获的类型错误：无法将属性“onchange”设置为 null
【发布时间】：2025-11-28 04:10:02
【问题描述】：

我正在使用下拉菜单来动态更改页面上的内容。它有效，但仅在 Chrome 中引发 js 错误。 Chrome 的建议我不知道如何实施。网站是在 ExpressionEngine 2.8.1 中构建的。

Chrome 中的错误消息

未捕获的类型错误：无法设置 null functions.js:65 的属性“onchange”
event.returnValue 已弃用。请改用标准的 event.preventDefault()。

我的 JS 代码

document.getElementById("drop").onchange = function() {
    if (this.selectedIndex!==0) {
        window.location.href = this.value;
    }        
};

我的 HTML 代码

            <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>

【问题讨论】：

在 Chrome 中运行良好，您运行的是什么版本？我在jsfiddle 中做到了这一点，效果很好
你能提供更多关于JS的信息吗？该脚本是否直接在 HTML 中？有更多的 JS 还是只有这一行？您确定您的 Chrome 稳定吗？
看起来你是在一个 jQuery 事件处理程序中执行这段代码，$(document).ready() 可能吗？如果代码在其他浏览器中确实有效，那么您的模板可能会在 Chrome 中中断。您可以在尝试将事件处理程序设置为select 之前检查form 的innerHTML。你能看到选择标签和它的 id 吗？
这很可能是浏览器的怪癖。了解 vanilla js 访问 dom 很棒，但如果您想要可靠性，请使用 JQuery 选择适当的元素。就像发布的 Adeneo 一样，唯一的解释是 document.getElementById 调用没有选择该元素。没有其他信息，无法回答。

标签： javascript jquery google-chrome

【解决方案1】：

您在 HTML 呈现之前运行 JavaScript 代码。

【讨论】：

【解决方案2】：

该错误消息只有一个可能的原因，document.getElementById("drop") 没有返回元素，唯一的原因是该元素不存在，但在 HTML 中它显然存在，所以脚本必须是在 DOM 中的元素之前运行。

您必须在 DOM 中的元素之后包含 javascript，或者将其包装在 DOM 就绪处理程序中，例如 window.onload 等。

<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>

【讨论】：

我的函数文件中有 js 代码。我会按照您的方式进行尝试，看看是否仍然出现错误。感谢您对此的帮助。
这行得通 :) 非常感谢您的帮助...大家也一样。

【解决方案3】：

使用文档就绪事件

$(document).ready(function(){

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

});

【讨论】：

【解决方案4】：

您需要确保通过标签与 HTML 文件的连接放在标签的最后一个子标签中。原因是这里必须先执行HTML，然后再执行JS。

【讨论】：