文件中包含的 JS 函数没有被调用？

如何解决文件中包含的 JS 函数没有被调用？

当我在下拉框中选择一个项目时，history.js 中包含的 Javascript 函数没有在 Struts 2 jsp 页面中被调用。

这是我在开发者工具中看到的错误

Uncaught ReferenceError: getClasses is not defined
    at HTMLSelectElement.onchange (history.action:279)

jsp页面是这样的

<%@ taglib uri="/WEB-INF/struts-tags.tld" prefix="s"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<script type="text/javascript" src="<s:url value='/js/common/ajax.js'/>"/>
<script type="text/javascript" src="<s:url value='/js/common/sorttable.js'/>"/>
<script type="text/javascript" src="<s:url value='/js/common/CalendarPopup.js'/>"/>
<script type="text/javascript" src="<s:url value='/js/common/skuformatting.js'/>"/>
<script type="text/javascript" src="<s:url value='/js/common/formatsku.js'/>"/>
<script type="text/javascript" src="<s:url value='/js/history.js'/>"/>
<script type="text/javascript">
    var cal = new CalendarPopup();      
</script>
...
...
<td align="center"> 
    <s:select id="form.search.deptFilter"  property="form.search.deptFilter" 
     list="form.deptSelectList" onchange="getClasses()" size="5"
     listKey="name" listValue="value" headerKey="-1" headerValue="Select a Department" />
</td>
...

getClasses() 在 history.js 中定义，这里是该文件中的方法定义。

...
    function getClasses(){
        var selectionComponent = document.getElementById('form.search.deptFilter');
        if(selectionComponent.options[selectionComponent.selectedindex].value == -1)
            return;
        clearSubClasses();
        document.getElementById('form.search.classFilter').options.length = 0;  // Empty class select Box
        sendAjaxRequest(selectionComponent,createClass);
    }
...

我在开发者工具的源代码部分注意到的一件事，我没有看到 js 文件夹中的 jsp 页面中包含的所有 js 文件，我认为这是问题，但不知道为什么。但几周前，一切正常。

知道为什么 history.js 文件中的 js 方法没有被调用吗？

解决方法

问题是您的 JSP 页面生成了无效的 HTML。加载时它仍然调用它的元素的顺序。但是，<script> 标记会在浏览器中异步调用一个单独的线程。

文档加载不会等待它们完成。 Hense，您尚未定义对该函数的引用，因为该函数尚未加载。为了确保在文档中使用函数之前定义了函数，您应该使用文档就绪事件。

如果您创建一个带有 <head> 和 <body> 标签的文档，并将您的 <script> 标签放在 <head> 中，这是通常的做法。 <head> 中定义的所有函数都可用于 <body> 元素。