function hideTranslationsAndShowText(request) {
		document.querySelectorAll(".translationText, .romanizationText").forEach(element => element.style.visibility = 'hidden')
		document.getElementById("fetchingText").style.visibility = "visible";
}

function updateTranslations(response) {
		const translations = JSON.parse(response);
		document.querySelectorAll(".translationText").forEach(element => {
			element.textContent = translations[element.id.replace("Text", "")];
		});

		// Send result to romanization sever
		// Since this is an asynchronous opreation, there is no indication that
		// it's being performed in the backend. So I add the 'loading' class to the progress
		// bar used to track translations, and then remove it in the 'resolved' handler.
		const elem = document.getElementById("loading-screen")
		elem.classList.toggle("loading")
		document.getElementById("fetchingText").textContent = "Fetching romanizations..."
		fetch("/romanize", {
				method: "POST",
				body: response
		}).then((newResponse) => newResponse.json()) // It looks like response.json() returns another promise, since the _body_ of the response may not have loaded yet. Do not confuse this json() with the static Response.json() method. Since it returns another promise, I have to call .then() to actually get the result.
		.then((data) => {
			elem.classList.toggle("loading");
			console.log(data);
			const romanizations = data;
			document.querySelectorAll(".romanizationText").forEach(element => {
				if (element.id.replace("Romanization", "") in romanizations) {
					element.textContent = "(" + romanizations[element.id.replace("Romanization", "")] + ")";
				}
			});
			// Show elements again
			document.querySelectorAll(".translationText, .romanizationText").forEach(element => element.style.visibility = 'visible')
			document.getElementById("fetchingText").textContent = "Fetching translations..." // Restore the original text content
			document.getElementById("fetchingText").style.visibility = "hidden"
		});
}