从HTML调用JavaScript函数不起作用

Question

我有此功能和HTML文件：

<%@page contentType="text/html" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
         <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" >
           <link href="resources/css/stiylesheet1.css" rel="stylesheet" media="screen">
           <link href="resources/css/printStyle.css" rel="stylesheet" media="print">
        <title></title>

      <script type="text/javascript">

   window.onload = function () {

     document.getElementById("cancelSubSubjectDialog").addEventListener('click', function(e) {
            e.preventDefault();

            document.getElementById("addSubSubjectDialog").close();
          });
    document.getElementById("saveSubSubjectDialog").addEventListener('click', function(e) {
            e.preventDefault();
            document.getElementById("addSubSubjectDialog").close();
          });

    document.getElementById("cancelSubjectDialog").addEventListener('click', function(e) {
            e.preventDefault();

            document.getElementById("addSubjectDialog").close();
          });
    document.getElementById("saveSubjectDialog").addEventListener('click', function(e) {
        e.preventDefault();
        document.getElementById("addSubjectDialog").close();
      });

       }

    function updateSubSubject(param)
    {
      selectList();
      document.getElementById("addSubSubjectDialog").showModal();
      document.getElementById("Departments_Select").value=param;

    }
   function selectList(){
   var selectDepartment=document.getElementById("Departments_Select");
   var selectSubjects=document.getElementById("Subjects_Select");
   var departmentsArray =getList("departments");
   var subjectsArray=   getList("subjects");
    for (var i = 0; i < departmentsArray.length; i++) {

        var departmentsOption = document.createElement("option");
        departmentsOption.value = departmentsArray[i];
        departmentsOption.text = departmentsArray[i];
        departmentsOption.name = departmentsArray[i];
      selectDepartment.appendChild(departmentsOption);
    }
for (var i = 0; i < subjectsArray.length; i++) {

        var subjectsOption = document.createElement("option");
        subjectsOption.value = subjectsArray[i];
        subjectsOption.text = subjectsArray[i];
        subjectsOption.name = subjectsArray[i];
        selectSubjects.appendChild(subjectsOption);
    }
   }
   </script>

    </head>

<body class="grad" style="font-family: 'Open Sans', sans-serif;">
    <div class="header"
        style="height: 100px; background-image: url(resources/images/streep_green.gif); margin: 0px;">
    </div>

    </div>


    <div align="center" class="main" 
        style="background-image: url(resources/images/final_background.gif); background-repeat: repeat-x; margin: 0">

        <div class="main"
            style="background-image: url(resources/images/final_background.gif); background-repeat: repeat-x; margin: 0">



        <div  class="searchDiv" style="margin-top:5%;width:50%;overflow-y: scroll;overflow-x: hidden; height:500px"  >  
        <form:form method="post"  modelAttribute="sub_subjects">
            <table  dir="rtl" class="table" >

                <th><label style="float:right;"><fmt:message key="subjectName" /></label></th>
                <th><label style="float:right;"><fmt:message key="subSubjectName"/></label></th>
                <th><label style="float:right;"><fmt:message key="department" /></label></th>

              <c:forEach  items="${sub_subjects.sub_subjects_list}" var="subsubject"  varStatus="status" >
               <tr id="tr">

                    <td ><form:hidden path="" name="sub_subjects_list[${status.index}].subjectObj.view" value="${subsubject.subjectObj.view}"/>${subsubject.subjectObj.view}</td>
                    <td ><form:hidden path="" name="sub_subjects_list[${status.index}].description" value="${subsubject.description}"/>${subsubject.description}</td>
                    <td ><form:hidden path="" name="sub_subjects_list[${status.index}].departmentObj.inCurrentLanguage" value="${subsubject.departmentObj.inCurrentLanguage}"/>${subsubject.departmentObj.inCurrentLanguage}</td>

                     <td >
                        <input id="editSubSubject" onClick="updateSubSubject("this is the text")" style="width:30%; height: 80%;" type="button"> </input>                 
                    </td>
              </tr>
                </c:forEach>                        
            </table>
        <br/>
        </div>
        </form:form>
    </div>
 </div>
</div>
</div>
</div>
    <dialog id="addSubSubjectDialog" style="width:25%; height:35%;">
        <div style="width:100%; hegit:20%;"><h2 style="font-size:100%;"><fmt:message key="add_sub_subject_dialog_title" /></h2></div>
           <form action="addSubSubject" method="post" > 
        <div style="width:100%; hegit:20%;">

            <h2 style="font-size:100%;"><input id="subSubjectName" name="subSubjectName" style="font-size:100%;text-align: right;"></input> <fmt:message key="insert_sub_subject_name" /> </h2>

        </div>
        <div style="width:100%; hegit:20%;">

            <h2 style="font-size:100%; ">
                    <h2 style="float:right; width: 20%; font-size: 100%;">
                                      <fmt:message key="select_subject" /> </h2>
                    <select id="Subjects_Select" name="Subjects_Select" class="form-control" style="width: 50%; text-align:right; float:right;"> </select>

           </h2>

        </div>
        <div style="width:100%; hegit:20%; margin-top: 15%;">

                <h2 style="font-size:100%;">
                        <h2 style="float:right; width: 20%; font-size: 100%;">  <fmt:message key="select_department" /></h2>
                    <select id="Departments_Select" name="Departments_Select" class="form-control" style="width: 50%;text-align:right;float:right; "> </select>

                 </h2>
        </div>

         <div style="height: 60px;margin-top:30% ;">

             <fmt:message key="save" var="save"/>
            <input type="submit" class="btn btn-success" style=" float: left; width:40%; "value="${save}"></input>
            <button id="cancelSubSubjectDialog"   class="btn btn-warning" style="float: right; width: 40%;" ><fmt:message key="cancel" /></button>
         </form>
         </div>
        </dialog>   
</body>

 <script type="text/javascript">

               function getList(listName){
                   var ListFromDB = [];
                   if(listName=="departments")
                       {
                          <c:forEach items="${departmentsList}" var="listItem">
                          ListFromDB.push( "<c:out value="${listItem.inCurrentLanguage}"/>" );

                           </c:forEach>
                       }
                   else if(listName=="subjects")
                   {
                      <c:forEach items="${subjectsList}" var="listItem">
                      ListFromDB.push( "<c:out value="${listItem.description}"/>" );

                       </c:forEach>
                   }

                return ListFromDB;
            }
          </script>
</html>

问题是，当我运行此HTML文件并单击“ editSubSubject”按钮时，没有任何反应。 JavaScript函数不会被调用。 当我删除此函数的参数并按如下方式调用它时：onClick =“ updateSubSubject（）”，它可以正常工作并打开对话框，

我的代码有什么问题？

Answer 1

您在此处转义双引号，这会导致错误：

onClick="updateSubSubject("this is the text")"

您需要转义双引号（使用" ）或单引号：

onClick="updateSubSubject('this is the text')"

从HTML调用JavaScript函数不起作用

问题描述

1 个解决方案

解决方案1
2 2016-06-30 06:29:24

从HTML调用JavaScript函数不起作用

问题描述

1 个解决方案

解决方案1 2 2016-06-30 06:29:24

解决方案1
2 2016-06-30 06:29:24