Ajax通信を利用した画面表示の切り替え

ここに質問の内容を詳しく書いてください。
JavaでWebアプリケーションを作成しています。
その中で、Ajax通信を用いてタスクの完了・未完了を切り替えデータベースの値もtrue/falseで切り替えられるようにしたいです。

発生している問題・エラーメッセージ

Uncaught TypeError: Cannot read property 'attributes' of null
が発生しています。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html xmlns:th="http://www.thymeleaf.org"
3	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
4	layout:decorate="~{layout/layout}">
5<head>
6<script th:src="@{/webjars/jquery/1.11.1/jquery.min.js}"></script>
7<meta charset="UTF-8"></meta>
8<meta name="_csrf" th:content="${_csrf.token}" />
9<meta name="_csrf_header" th:content="${_csrf.headerName}" />
10<title>WorshipList</title>
11</head>
12<body>
13<div layout:fragment="content">
14	<!-- コンテンツ部分 -->
15	<div th:fragment="worshipList_contents">
16		<div class="page-header">
17			<h1>お参り一覧</h1>
18		</div>
19		<table class="table table-bordered table-hover table-striped">
20			<tr>
21				<th class="info col-sm-2" th:text="#{supporterName}">檀徒氏名</th>
22				<th class="info col-sm-2" th:text="#{worship}">お参り</th>
23				<th class="info col-sm-2" th:text="#{schedule}">日時</th>
24				<th class="info col-sm-2" th:text="#{remark}">備考</th>
25				<th class="info col-sm-2" th:text="#{done}">完了チェック</th>
26			</tr>
27			<tr th:each="worship : ${worshipList}" th:object="${worship}">
28				<td th:text="*{supporterName}"></td>
29				<td th:text="*{worshipOpts.label}"></td>
30				<td th:text="*{schedule}"></td>
31				<td th:text="*{remark}"></td>
32				<td>
33					<button class="btn btn-warning"
34						th:style="'display:' + (${worship.progress} ? 'none' : '')"
35						th:onclick="|complete(this, '*{worshipId}',true)|"
36						th:text="#{incomplete}">未完了</button>
37					<button class="btn btn-secondary"
38						th:style="'display:' + (${worship.progress} ? '' : 'none')"
39						th:onclick="|complete(this, '*{worshipId}',false)|"
40						th:text="#{complete}">完了</button>
41				</td>
42			</tr>
43		</table>
44
45		<script type="text/javascript">
46				console.log( document.querySelector("meta[name='_csrf']") )
47				console.log( document.querySelector("meta[name='_csrf']").attributes['content'] )
48				console.log( document.querySelector("meta[name='_csrf']").attributes['content'].value )
49			   	  var complete = function(element, worshipId, doComplete) {
50			      const token = document.querySelector("meta[name='_csrf']").attributes['content'].value;
51			      const header = document.querySelector(
52			          "meta[name='_csrf_header']").attributes['content'].value; 
53				　const bgColor = document.getElementById(worshipId);
54			      let url =  doComplete ? "/complete" : "/incomplete";
55			      fetch(url, {
56			        method: 'POST',
57			       headers: {
58			          "Content-Type": 'application/x-www-form-urlencoded',
59			          [header]: token 
60			        },  
61			        body: `worshipId=${worshipId}`
62			      }).then(
63			    		  response => {
64			    	            if (doComplete) {
65			    	            	element.style.display = 'none';
66			    	                element.nextElementSibling.style.display = '';
67			    	            } else {
68			    	            	element.style.display = 'none';
69			    	            	element.previousElementSibling.style.display = '';
70			    	            }
71			    	          }
72			      );
73			    }
74
75  		</script>
76	</div>
77</div>
78</body>
79</html>

疑問

metaタグで指定したth:contentの中身がattributesの［'content'］に相当するものだと理解していますが、
なぜnullが返されるのか？

試したこと

console.logによるデバッグ
コンソールに上記のエラー以外表示されていませんでした。

m.ts10806

2020/06/27 05:35

ブラウザに出力されたHTMLコードはどうなってますか？

NodaYudai

2020/06/27 05:39

```HTML <!DOCTYPE html> <html> <head> <meta charset="UTF-8"></meta>  <link href="/webjars/bootstrap/3.3.7-1/css/bootstrap.min.css" rel="stylesheet"></link> <script src="/webjars/jquery/1.11.1/jquery.min.js"></script> <script src="/webjars/bootstrap/3.3.7-1/js/bootstrap.min.js"></script>  <link href="/css/home.css" rel="stylesheet"></link> <title>Home</title> </head> <body>  <nav class="navbar navbar-inverse navbar-fixed-top" style="background-color:#007bbb;"> <div class="container-fluid"> <div class="navbar-header"> <div class="navbar-brand">寺務管理アプリケーション</div> </div> <form method="post" action="/logout"><input type="hidden" name="_csrf" value="f3e744f6-424e-47dd-b650-33e3bccaec1a"/> <button class="btn btn-link pull-right navbar-brand" type="submit"> ログアウト </button> </form> </div> </nav>  <div class="container-fluid"> <div class="row"> <div class="col-sm-2 sidebar"> <ul class="nav nav-pills nav-stacked"> <li role="presentation"> <a href="/supporterList">檀徒一覧</a> </li> <li role="presentation"> <a href="/supporterInsert">檀徒情報登録</a> </li> <li role="presentation"> <a href="/schedule">お参り一覧</a> </li> </ul> </div> </div> </div>  <div class="container-fluid"> <div class="row"> <div class="col-sm-10 col-sm-offset-2 main">  <div> <div class="page-header"> <h1>お参り一覧</h1> </div> <table class="table table-bordered table-hover table-striped"> <tr> <th class="info col-sm-2">檀信徒氏名</th> <th class="info col-sm-2">お参り</th> <th class="info col-sm-2">日時</th> <th class="info col-sm-2">備考</th> <th class="info col-sm-2">完了チェック</th> </tr> <tr> <td>野田雄大</td> <td>葬式</td> <td>2020-06-27T08:50</td> <td></td> <td> <button class="btn btn-warning" style="display:" onclick="complete(this, '1',true)">未完了</button> <button class="btn btn-secondary" style="display:none" onclick="complete(this, '1',false)">完了</button> </td> </tr> </table> <script type="text/javascript"> var complete = function(element, worshipId, doComplete) { /* const token = document.querySelector("meta[name='_csrf']").attributes['content'].value; const header = document.querySelector( "meta[name='_csrf_header']").attributes['content'].value; */ let token = $("meta[name='_csrf']").attr("content"); let header = $("meta[name='_csrf_header']").attr("content"); let url = doComplete ? "/complete" : "/incomplete"; fetch(url, { method: 'POST', headers: { "Content-Type": 'application/x-www-form-urlencoded', [header]: token }, body: `worshipId=${worshipId}` }).then( response => { if (doComplete) { element.style.display = 'none'; element.nextElementSibling.style.display = ''; } else { element.style.display = 'none'; element.previousElementSibling.style.display = ''; } } ); } </script> </div> </div> </div> </div> </body> </html> ``` このような内容になっています。