未捕获的TypeError：无法设置null的属性’onchange’

我正在使用下拉列表来动态更改页面上的内容。 它工作但只在Chrome中抛出一个js错误。 Chrome推荐的内容我不知道如何实施。 Site是在ExpressionEngine 2.8.1中构建的。

在CHROME中的错误消息

未捕获的TypeError：无法设置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代码

  
  Select a Location: {exp:channel:entries channel="locations" category="not 3" orderby="title" sort="asc" dynamic="no"} {title} {/exp:channel:entries}   

Answer 1

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

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

 
  Select a Location:{exp:channel:entries channel="locations" category="not 3" orderby="title" sort="asc" dynamic="no"} {title}{/exp:channel:entries}  
  

Answer 2

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

Answer 3

使用文档就绪事件

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