• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

JavaScript - zmiana języka strony

0 głosów
134 wizyt
pytanie zadane 10 lutego w JavaScript, jQuery, AJAX przez plGazela Nowicjusz (180 p.)

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)

 

1 odpowiedź

0 głosów
odpowiedź 10 lutego przez Tomek Sochacki Mędrzec (190,720 p.)
Do tworzenia wersji wielojęzycznych polecam raczej wykonanie oddzielnych buildów i serwowaniech ich odpowiednio do języka, albo chociaż osobne conenty. Proponuję nie wynajdywać koła na nowo i posłużyć się gotowymi narzędziami np. gettext czy i18n + odpowiedni config webpacka + np. poedit do łatwej edycji plików .po lub xlifów.

Podobne pytania

+2 głosów
3 odpowiedzi 5,035 wizyt
0 głosów
1 odpowiedź 604 wizyt
pytanie zadane 22 sierpnia 2017 w HTML i CSS przez Paweł123 Nałogowiec (30,550 p.)
+1 głos
1 odpowiedź 62 wizyt
Porady nie od parady
Zadając pytanie postaraj się o szczegółowe opisanie problemu oraz udostępnienie wszystkich istotnych informacji (kody źródłowe, zrzuty ekranu itp.).Opisanie problemu

67,112 zapytań

114,058 odpowiedzi

241,718 komentarzy

47,027 pasjonatów

Przeglądających: 171
Pasjonatów: 9 Gości: 162

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...