尝试调用 onclick 函数时出现未捕获的 ReferenceError

Question

我正在使用 Spring、Thymeleaf 和 Bootstrap，希望能够显示、编辑和删除我的大学课程。为了编辑课程，我需要调用我在 courses.js 中定义的 JavaScript 函数。目前我只是试图将所选课程记录到控制台，以查看是否一切正常。但是当点击编辑按钮时，我得到：“Uncaught ReferenceError: editCourse is not defined at HTMLButtonElement.onclick”，即使我在 courses.js 中定义了函数 editCourse。这是我的代码：

HTML:

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymleaf.org">
<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link th:href="@{/css/courses.css}" rel="stylesheet">
    <script type="text/javascript" th:src="@{/js/courses.js}"></script>
    <meta charset="UTF-8">
    <title>My TU Dortmund Courses</title>
</head>
<body class="mx-1 my-1 bg-dark">

<div class="px-3 py-3 mb-5 text-center">
    <h3 class="text-white" th:text="'Courses (' + ${totalLp} + ' LP)'"></h3>
    <table class="table table-dark">
        <thead>
        <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Professor</th>
            <th>LP</th>
            <th>Status</th>
            <th>Grade</th>
            <th></th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="course:${courses}">
            <td th:text="${course.id}" />
            <td th:text="${course.name}" />
            <td th:text="${course.professor}" />
            <td th:text="${course.LP}" />
            <td th:text="${course.status}" />
            <td th:text="${course.grade}" />
            <td>
                <!-- Not working -->
                <button type="button" class="btn btn-outline-primary btn-sm"
                        data-bs-toggle="modal" data-bs-target="#exampleModal"
                        th:attr="onclick=|editCourse('${course}')|">Edit</button>

                <a th:href="@{courses/delete/{id}(id=${course.id})}" class="btn btn-outline-danger btn-sm">X</a>
            </td>
        </tr>
        </tbody>
    </table>
</div>

<div class="container w-50 bg-dark text-white">
    <h3 class="text-center">Add Course</h3>
    <form id="addCourse" name="addCourse" method="post" th:action=@{/courses/add} th:object="${newCourse}">
        <p>Name: <input class="form-control" type="text" th:field="*{name}" /></p>
        <p>Professor: <input class="form-control" type="text" th:field="*{professor}" /></p>
        <p>LP: <input class="form-control" type="number" th:field="*{LP}" /></p>
        <div class="form-check form-check-inline">
            <label class="form-check-label">Status: </label>
        </div>
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="active"
                   th:field="*{status}" onclick="activeCheck();">
            <label class="form-check-label" for="inlineRadio1">active</label>
        </div>
        <div class="form-check form-check-inline mb-3 mt-2">
            <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="passed"
                   th:field="*{status}" onclick="passedCheck();">
            <label class="form-check-label" for="inlineRadio2">passed</label>
        </div><br>
        <p id="gradeField" style="display: none">Grade: <input class="form-control" type="number" step="any"
                                                               th:field="*{grade}" /></p>
        <button class="btn btn-primary mb-3" type="submit">Submit</button>
    </form>
</div>


<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>


<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>

JS:

function activeCheck() {
    document.getElementById("gradeField").style.display = "none";
}

function passedCheck() {
    document.getElementById("gradeField").style.display = "block";
}

function editCourse(course) {
    console.log(course);
}

Answer 1

它必须被序列化为一个javascript对象

public class BaseModel implements Serializable {

  public String toJson() throws JsonProcessingException {
    return new ObjectMapper().writeValueAsString(this);
  }
}

@ToString
@NoArgsConstructor
@AllArgsConstructor
@Setter
@Getter
public class Course extends BaseModel {

  private long id;
  private String name;
}

@Controller
public class MainController {

  @GetMapping("main")
  public String getMain(Model model) {
    var courses = IntStream.range(0, 10)
        .mapToObj(i -> new Course(i, i + "th"))
        .collect(Collectors.toList());
    model.addAttribute("courses", courses);
    return "main";
  }
}

<!DOCTYPE html>
<html lang="ko"
      xmlns:th="http://www.thymeleaf.org">
<head>
  <script>
    /**
     * @param {{id: number, name: string}} course
     */
    function onClickCourse(course) {
      console.log(course)
    }
  </script>
</head>
<body>
<div>
  <th:block th:each="course: ${courses}">
    <div>
      <span th:text="${course.name}"/>
      <button th:attr="onclick=('onClickCourse('+ ${course.toJson()} +')')">click</button>
    </div>
  </th:block>
</div>
</body>
</html>

enter image description here

Answer 2

好的，在尝试了几乎所有方法之后，我终于找到了问题所在。诀窍是简单地删除我的缓存并重新加载项目。我想，JavaScript 刚刚从我的缓存中加载，因此在我更改它时没有更新。

尝试调用 onclick 函数时出现未捕获的 ReferenceError

Uncaught ReferenceError when trying to call a onclick Function

javascript

html

spring

thymeleaf