Niedawno rozpocząłem naukę JS i chciałem zrobić jakiś własny drobny projekt. Wpadłem na pomysł strony z dynamicznym zmienianiem języka z angielskiego na polski i odwrotnie. Do tego stworzyłem testowo jakiś formularz i napisałem trochę kodu, który działa ale zastanawia mnie jedno czy ma on sens, wydaje mi się on bardzo ciężki i przy większej ilości rzeczy do zmiany, bezsensowny. Szukałem innych rozwiązań lecz jedynie co znalazłem to PHP i biblioteki do JS, których na razie nie chciałbym ruszać. Moim pytaniem jest, czy to tak musi wyglądać, czy mogę to załatwić w inny sposób?
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<head>
<title>Dashboard</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
</head>
</head>
<body>
<div id="login-panel">
<nav id="changeLanguage">
<button id="changeToEnglish">English</button>
<button id="changeToPolish">Polish</button>
</nav>
<main id="signIn">
<fieldset>
<legend id="login-header">Sign In</legend>
<label id="login-email" for="email">E-Mail</label>
<input type="email" name="email" required="required">
<label id="login-password" for="password">Password</label>
<input type="password" name="password" required="required">
<button id="login-submit">Sign In</button>
</fieldset>
</main>
</div>
<script src="content/scripts/changeLanguage.js"></script>
</body>
</html>
JavaScript:
let languageElements = {
en: {
englishButton: "English",
polishButton: "Polish",
loginHeader: "Sign In",
loginPassword: "Password"
},
pl: {
englishButton: "Angielski",
polishButton: "Polski",
loginHeader: "Zaloguj się",
loginPassword: "Hasło"
}
}
let languageTag = document.documentElement.lang
let changeToEnglishButton = document.getElementById("changeToEnglish")
let changeToPolishButton = document.getElementById("changeToPolish")
function changeToEnglish() {
document.documentElement.lang = "en"
document.getElementById("login-header").innerHTML = languageElements.en.loginHeader
document.getElementById("login-password").innerHTML = languageElements.en.loginPassword
document.getElementById("login-submit").innerHTML = languageElements.en.loginHeader
}
function changeToPolish() {
document.documentElement.lang = "pl"
document.getElementById("login-header").innerHTML = languageElements.pl.loginHeader
document.getElementById("login-password").innerHTML = languageElements.pl.loginPassword
document.getElementById("login-submit").innerHTML = languageElements.pl.loginHeader
}
changeToEnglishButton.addEventListener("click", changeToEnglish)
changeToPolishButton.addEventListener("click", changeToPolish)