[英]How to call a function onclick from external JS - Uncaught ReferenceError
[英]Uncaught ReferenceError when trying to call a onclick Function
我正在使用 Spring、Thymeleaf 和 Bootstrap,希望能夠顯示、編輯和刪除我的大學課程。 為了編輯課程,我需要調用我在 courses.js 中定義的 JavaScript function。 目前我只是試圖將所選課程記錄到控制台,以查看是否一切正常。 但是當點擊編輯按鈕時,我得到:“Uncaught ReferenceError: editCourse is not defined at HTMLButtonElement.onclick”,即使我在 courses.js 中定義了 function 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>
記者:
function activeCheck() {
document.getElementById("gradeField").style.display = "none";
}
function passedCheck() {
document.getElementById("gradeField").style.display = "block";
}
function editCourse(course) {
console.log(course);
}
它必須序列化為 javascript object
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>
好吧,在嘗試了幾乎所有的事情之后,我終於找到了問題所在。 訣竅是簡單地刪除我的緩存並重新加載項目。 我猜 JavaScript 剛剛從我的緩存中加載,因此在我更改它時沒有更新。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.