From 00c3041d953583a60439a6c61ffda957d6ea2941 Mon Sep 17 00:00:00 2001
From: n-kawahito <n-kawahito@iij.ad.jp>
Date: Tue, 29 Sep 2026 15:11:35 +0900
Subject: [PATCH] =?UTF-8?q?[FIX]=E5=8F=8E=E6=94=AF=E3=81=AE=E9=81=B8?=
 =?UTF-8?q?=E6=8A=9E=E3=81=AB=E5=90=88=E3=82=8F=E3=81=9B=E3=81=A6=E3=82=AB?=
 =?UTF-8?q?=E3=83=86=E3=82=B4=E3=83=AA=E3=81=8C=E5=87=BA=E3=82=8B=E3=82=88?=
 =?UTF-8?q?=E3=81=86=E3=81=AB=E3=81=97=E3=81=BE=E3=81=97=E3=81=9F=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../templates/transaction_create.html         | 84 ++++++++++---------
 .../templates/transaction_update.html         | 58 +++++++------
 2 files changed, 79 insertions(+), 63 deletions(-)

diff --git a/src/main/resources/templates/transaction_create.html b/src/main/resources/templates/transaction_create.html
index 53e3bd3..0c818e9 100644
--- a/src/main/resources/templates/transaction_create.html
+++ b/src/main/resources/templates/transaction_create.html
@@ -113,58 +113,66 @@
 
 	<div th:replace="~{footer :: footer}"></div>
 
-	<script inline="javascript">
-		const transactionType = document.getElementById("transactionType");
-		const categoryId = document.getElementById("categoryId");
+	<script th:inline="javascript">
+			const transactionType = document.getElementById("transactionType");
+			const categoryId = document.getElementById("categoryId");
 
-		const expenseList = document.getElementsByClassName("expenseListClass");
-		const incomeList = document.getElementsByClassName("incomeListClass");
+			const expenseList = document.getElementsByClassName("expenseListClass");
+			const incomeList = document.getElementsByClassName("incomeListClass");
 
-		const tType = '[[${session.tType}]]';
-		
-		if (tType == "0") {
-			transactionType.value = 0;
-		} else if (tType == "1") {
-			transactionType.value = 1;
-		}
-		
-		
-		transactionType.addEventListener("change", function () {
+			const tType = '[[${session.tType}]]';
+			
+			function toggleCategory() {
 
-			if (this.value === "0") {
+			    if (transactionType.value === "0") {
 
-				for (let i = 0; i < expenseList.length; i++) {
-					expenseList[i].style.display = "";
-				}
+			        for (let i = 0; i < expenseList.length; i++) {
+			            expenseList[i].style.display = "";
+			        }
 
-				for (let i = 0; i < incomeList.length; i++) {
-					incomeList[i].style.display = "none";
-				}
+			        for (let i = 0; i < incomeList.length; i++) {
+			            incomeList[i].style.display = "none";
+			        }
 
-			} else if (this.value === "1") {
+			    } else if (transactionType.value === "1") {
 
-				for (let i = 0; i < expenseList.length; i++) {
-					expenseList[i].style.display = "none";
-				}
+			        for (let i = 0; i < expenseList.length; i++) {
+			            expenseList[i].style.display = "none";
+			        }
 
-				for (let i = 0; i < incomeList.length; i++) {
-					incomeList[i].style.display = "";
-				}
+			        for (let i = 0; i < incomeList.length; i++) {
+			            incomeList[i].style.display = "";
+			        }
 
-			} else {
+			    } else {
 
-				for (let i = 0; i < expenseList.length; i++) {
-					expenseList[i].style.display = "none";
-				}
+					for (let i = 0; i < expenseList.length; i++) {
+						expenseList[i].style.display = "none";
+					}
 
-				for (let i = 0; i < incomeList.length; i++) {
-					incomeList[i].style.display = "none";
+					for (let i = 0; i < incomeList.length; i++) {
+						incomeList[i].style.display = "none";
+					}
 				}
 			}
 
-			categoryId.value = "";
-		});
-	</script>
+			transactionType.addEventListener("change", function () {
+
+			    toggleCategory();
+
+			    categoryId.value = "";
+
+			});
+			
+			if (tType == "0") {
+				transactionType.value = "0";
+			} else if (tType == "1") {
+				transactionType.value = "1";
+			}
+			
+			toggleCategory();
+			
+		</script>
 
 
 </body>
diff --git a/src/main/resources/templates/transaction_update.html b/src/main/resources/templates/transaction_update.html
index d9d54e7..845047c 100644
--- a/src/main/resources/templates/transaction_update.html
+++ b/src/main/resources/templates/transaction_update.html
@@ -156,7 +156,7 @@
     <div th:replace="~{footer :: footer}">
     </div>
 
-	<script inline="javascript">
+	<script th:inline="javascript">
 		const transactionType = document.getElementById("transactionType");
 		const categoryId = document.getElementById("categoryId");
 
@@ -165,36 +165,29 @@
 
 		const tType = '[[${session.tType}]]';
 		
-		if (tType == "0") {
-			transactionType.value = 0;
-		} else if (tType == "1") {
-			transactionType.value = 1;
-		}
-		
-		
-		transactionType.addEventListener("change", function () {
+		function toggleCategory() {
 
-			if (this.value === "0") {
+		    if (transactionType.value === "0") {
 
-				for (let i = 0; i < expenseList.length; i++) {
-					expenseList[i].style.display = "";
-				}
+		        for (let i = 0; i < expenseList.length; i++) {
+		            expenseList[i].style.display = "";
+		        }
 
-				for (let i = 0; i < incomeList.length; i++) {
-					incomeList[i].style.display = "none";
-				}
+		        for (let i = 0; i < incomeList.length; i++) {
+		            incomeList[i].style.display = "none";
+		        }
 
-			} else if (this.value === "1") {
+		    } else if (transactionType.value === "1") {
 
-				for (let i = 0; i < expenseList.length; i++) {
-					expenseList[i].style.display = "none";
-				}
+		        for (let i = 0; i < expenseList.length; i++) {
+		            expenseList[i].style.display = "none";
+		        }
 
-				for (let i = 0; i < incomeList.length; i++) {
-					incomeList[i].style.display = "";
-				}
+		        for (let i = 0; i < incomeList.length; i++) {
+		            incomeList[i].style.display = "";
+		        }
 
-			} else {
+		    } else {
 
 				for (let i = 0; i < expenseList.length; i++) {
 					expenseList[i].style.display = "none";
@@ -204,9 +197,24 @@
 					incomeList[i].style.display = "none";
 				}
 			}
+		}
+
+		transactionType.addEventListener("change", function () {
+
+		    toggleCategory();
+
+		    categoryId.value = "";
 
-			categoryId.value = "";
 		});
+		
+		if (tType == "0") {
+			transactionType.value = "0";
+		} else if (tType == "1") {
+			transactionType.value = "1";
+		}
+		
+		toggleCategory();
+		
 	</script>