【问题标题】:Call a JavaScript function from HTML doesn't work从 HTML 调用 JavaScript 函数不起作用
【发布时间】:2016-06-30 06:25:16
【问题描述】:

我有这个函数和 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 文件并单击“editSubject”按钮时,没有任何反应。 JavaScript 函数不会被调用。当我删除此函数的参数并像这样调用它时: onClick="updateSubject()" 它工作正常并打开对话框,

我的代码有什么问题?

【问题讨论】:

    标签: javascript html spring model-view-controller


    【解决方案1】:

    您在这里转义了双引号,这导致了错误:

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

    您需要转义双引号(使用&amp;quot;)或使用单引号:

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

    【讨论】:

    • 如果我想发送这样的对象或作为对象一部分的字符串,我该怎么做:myObj.myString 我这样做是这样的,但它不起作用..我不需要添加''因为它将是字符串'myObj.myString',那么我该怎么做呢?
    • @user6319790 不,你没有,否则它将是文本 "myObj.myString" 而不是值 myObj.myString。你可以简单地做updateSubSubject(myObj.myString)
    • 好的,这是 updateSubSubject(myObj.myString) 不起作用的问题.. 使用 F12 时的翻译是 updateSubSubject(myObj.myString) 而不是 myObj.myString.. . 我能做什么?
    • @user6319790 我不确定你所说的 " 是什么意思 updateSubSubject(myObj.myString) 而不是 myObj.myString 的值"。你定义了myObj ? Here is a basic example
    • 我不知道,我有一个对象列表,我想为该列表中的每个对象添加按钮,单击此按钮会将特定对象发送到此函数我该怎么做那?可能不是这样定义的?
    猜你喜欢
    • 2014-08-17
    • 2021-11-09
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多