thymeleafでJavaScriptのonclickが動作しない

前提・実現したいこと

onclickを使って値（文字列）が入っているかどうかで分岐させたいです。
trueの場合はnullを判定して、「打刻の状態を「出勤」にしてもよろしいですか？」の狙い通りの文言が出ているのですが、nullにならないonclickを動作させた時にエラーが出てモーダルも作用しません。
script冒頭のalertも鳴っていません。
onclick時に転けているので、引数に問題があると思うのですが。。
原因が分かる方がいらっしゃったらお力を貸してください。

該当のソースコード

java
1<!doctype html>
2<html xmlns:th="http://www.thymeleaf.org">
3<head th:replace="~{layout/component :: head('タイムカード')}"></head>
4<script>
5function entryCheck(id, workstarttime) {
6
7	alert(workstarttime);
8
9	var resultString = '';
10
11    if(workstarttime == null) {
12    	resultString = '打刻の状態を「出勤」にしてもよろしいですか？';
13    }else {
14    	resultString = '打刻の状態を「退勤」にしてもよろしいですか？';
15    }
16
17    var result = window.confirm(resultString);
18
19    if(result) {
20    	document.location.href = '/timecard/entry?id=' + id;
21    }
22}
23</script>
24<body>
25<th:block th:replace="~{layout/component :: header}"></th:block>
26<div class="container">
27	<th:block th:replace="~{layout/component :: container_top('タイムカード')}"></th:block>
28	<div class="row justify-content-start">
29		<table class="table table-striped table-sm">
30		    <tr>
31		      <th></th>
32		      <th>ID</th>
33		      <th>氏名</th>
34		      <th>出勤</th>
35		      <th>退勤</th>
36		    </tr>
37		    <tr th:each="entity:${list}">
38		      <td th:if="${entity[2] == null}"><input type="button" value="出勤" th:attr="onclick='entryCheck(' + ${entity[0]} + ', ' + ${entity[2]} + ');'"></td>
39		      <td th:if="${entity[2] != null && entity[3] == null}"><input type="button" value="退勤" th:attr="onclick='entryCheck(' + ${entity[0]} + ', ' + ${entity[2]} + ');'"></td>
40		      <td th:if="${entity[2] != null && entity[3] != null}"><input type="button" value="打刻済み" disabled></td>
41		      <td th:text="${entity[0]}" id="id" th:field="*{id}">id</td>
42		      <td th:text="${entity[1]}">name</td>
43		      <td th:text="${entity[2]}">age</td>
44		      <td th:text="${entity[3]}">age</td>
45		    </tr>
46	    </table>
47	</div>
48</div>
49<footer th:replace="~{layout/component :: footer}"></footer>
50</body>
51</html>

行動規範の内容に同意します

回答1件

ベストアンサー

JavaScriptの問題です。
文字列はシングルクォーテーションで囲う必要があります。
thタグ内でシングルクォーテーション自体を出力したい場合はエスケープします。

html
1th:value="\'\'"
2
3

投稿2021/03/01 22:16

m.ts10806

総合スコア80888

mimi_129

2021/03/01 22:35

ご回答ありがとうございます。うーん、こうですかね。。エラーが出ます。 <input type="button" value="退勤" th:attr="onclick='entryCheck(' + ${entity[0]} + ', ' + ¥'${entity[2]}¥' + ');'"> org.thymeleaf.exceptions.TemplateProcessingException: Could not parse as assignation sequence: "onclick='entryCheck(' + ${entity[0]} + ', ' + ¥'${entity[2]}¥' + ');'" (template: "/timecard/index" - line 39, col 95)