index.html

@@ -40,20 +40,18 @@
 				stroke-width: 1;
 			}
 			.languageText, .romanizationText {
-	/*			visibility: hidden; */
+				visibility: hidden;
 				font-family: "Noto Sans";
 				font-size:1.25em;
 				pointer-events: none;
 			}
 
-	/*		
 			.language:hover ~ .languageText {
 				visibility: visible;
 			}
 			.language:hover ~ .romanizationText {
 				visibility: visible;
 			}
-	 */
 
 			.testClass:hover {
 				fill: red;
@@ -102,7 +100,7 @@
 		<main>
 		<section id="textStuff">
 			<h1>Indian Translate</h1>
-			<form hx-get="/submit" hx-swap=none hx-indicator="#loading-screen" hx-on::before-request="hideText(event.detail.xhr.response)" hx-on::after-request="updateTranslations(event.detail.xhr.response)" class="translateForm" method="get">
+			<form hx-get="/submit" hx-swap=none hx-indicator="#loading-screen" hx-on::after-request="updateTranslations(event.detail.xhr.response)" class="translateForm" method="get">
 				<label for="query">Enter text to translate:</label>
 				<input type="text" name="query" id="query" required/>
 				<input type="submit" value="Translate"/>

updateTranslations.js

@@ -1,7 +1,3 @@
-function hideText(request) {
-		document.querySelectorAll(".languageText, .romanizationText").forEach(element => element.style.visibility = 'hidden')
-}
-
 function updateTranslations(response) {
 		const translations = JSON.parse(response);
 		document.querySelectorAll(".languageText").forEach(element => {
@@ -27,7 +23,5 @@ function updateTranslations(response) {
 					element.textContent = "(" + romanizations[element.id.replace("Romanization", "")] + ")";
 				}
 			});
-			// Show elements again
-			document.querySelectorAll(".languageText, .romanizationText").forEach(element => element.style.visibility = 'visible')
 		});
 }