• 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
87 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 (169,790 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 4,773 wizyt
0 głosów
1 odpowiedź 486 wizyt
pytanie zadane 22 sierpnia 2017 w HTML i CSS przez Paweł123 Nałogowiec (26,760 p.)
0 głosów
1 odpowiedź 57 wizyt
Porady nie od parady
Wynikowy wygląd pytania, odpowiedzi czy komentarza, różni się od tego zaprezentowanego w edytorze postów. Stosuj więc funkcję Podgląd posta znajdującą się pod edytorem, aby upewnić się, czy na pewno ostateczny rezultat ci odpowiada.Podgląd posta

62,306 zapytań

108,432 odpowiedzi

226,358 komentarzy

35,043 pasjonatów

Przeglądających: 179
Pasjonatów: 4 Gości: 175

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.

...