Uncaught TypeError：无法设置null的属性'onchange' [英] Uncaught TypeError: Cannot set property 'onchange' of null

问题描述

我正在使用下拉菜单来动态更改网页上的内容。它的工作原理，但只是在Chrome中抛出一个js错误。 Chrome建议我不知道如何实施。

CHROME中的错误消息

未捕获TypeError：无法设置null functions.js的属性'onchange'：65
event.returnValue已弃用。请改用标准的event.preventDefault（）。

我的JS代码

  document.getElementById（drop）。onchange = function（）{$ b $ if（this.selectedIndex！== 0）{
 window.location.href = this.value; 
} 
}; 
  

我的HTML代码

 < form method =postaction ={path ='locations / index'}class =drop> 
< select id =drop> 
< option>选择位置：< / option> 
 {exp：channel：entries channel =locationscategory =not 3orderby =titlesort =ascdynamic =no} 
< option value ={site_url}的index.php /位置/ {url_title}> {TITLE}< /选项> 
 {/ exp：channel：entries} 
< / select> 
< / form> 
  

解决方案

该错误消息只有一个可能的原因， code> document.getElementById（drop）不会返回元素，唯一的原因是元素不存在，但是在HTML中它显然会这样做，所以该脚本必须在DOM中的元素之前运行。

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

 < form method =postaction ={path ='locations / index'}class =drop> 
< select id =drop> 
< option>选择位置：< / option> {exp：channel：entries channel =locationscategory =not 3orderby =titlesort =ascdynamic =no} 
< option value ={site_url} index.php / locations / {url_title}> {title}< / option> {/ exp：channel：entries} 
< / select> 
< / form> 
< script>如果（this.selectedIndex！== 0）{
 window.location.href = this.value; 
} 
}; 
< / script> 
  

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 built in ExpressionEngine 2.8.1.

ERROR MESSAGE IN CHROME

Uncaught TypeError: Cannot set property 'onchange' of null functions.js:65
event.returnValue is deprecated. Please use the standard event.preventDefault() instead.

MY JS Code

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

MY HTML Code

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

解决方案

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>

这篇关于Uncaught TypeError：无法设置null的属性'onchange'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！