Strona w kilku językach. Problem.

pytanie zadane 23 lutego 2023 w JavaScript przez AtomBari Początkujący (440 p.)

Witam, staram się stworzyć stronę w "3 językach" przy użyciu js. Bazowy język to szwedzki dodatkowe to angielski oraz polski. Strona główna czyli index.html, tłumaczenie przy użyciu js działa perfekcyjnie problemem jest to iż w momencie zmiany strony na np contact.html i użyciu tego samego pliku js tłumaczenie tam już nie działa.

- Czy da się to ogarnać aby używać jednego pliku js ewentualnie 3 po jednym dla każdego języka czyli sv,pl oraz en?

- I jak zrobić że kiedy np zmieniam na stronie głównej język z polskiego na angielski i zmieniam stronę na np kontakt aby ten język który wybraliśmy się zapisał i żeby nie trzeba było zmieniać języka za każdym razem jak zmieniamy stronę ?

Z racji ograniczenia długości znaków skracam troche kod.

language.js:

// Navbar
const navHome = document.querySelector('[itemid="navHome"]');
const navTreat = document.querySelector('[itemid="navTreat"]');
const navSurvey = document.querySelector('[itemid="navSurvey"]');
const navGeneral = document.querySelector('[itemid="navGeneral"]');
const navHygienist = document.querySelector('[itemid="navHygienist"]');
const navSurgery = document.querySelector('[itemid="navSurgery"]');
const navProsthodontics = document.querySelector('[itemid="navProsthodontics"]');
const navCosmetic = document.querySelector('[itemid="navCosmetic"]');
const navPrice = document.querySelector('[itemid="navPrice"]');
const navContact = document.querySelector('[itemid="navContact"]');
const navAbout = document.querySelector('[itemid="navAbout"]');

//about.html
//___________________________________________________________________________________________________
const pTextAbout = document.querySelector('[itemid="pTextAbout"]');

const changeLanguage = (lang) => {
  if (lang === "sv") {
    document.documentElement.lang = 'sv';
    
    // Navbar
    navHome.innerHTML = "Hem";
    navTreat.innerHTML = "Behandlingar";
    navSurvey.innerHTML = "Undersökning ";
    navGeneral.innerHTML = "Allmänttandvård";
    navHygienist.innerHTML = "Tandhygienist";
    navSurgery.innerHTML = "Tandkirurgi";
    navProsthodontics.innerHTML = "Protetik";
    navCosmetic.innerHTML = "Estetyiskt Tandvård";
    navPrice.innerHTML = "Priser";
    navContact.innerHTML = "Kontakt";
    navAbout.innerHTML = "Om oss";

    //About
    pTextAbout.innerHTML = "Dental Clinic har framgångsrikt arbetat med patienter sedan ... <br><br> En legitimerad tandläkare med högre medicinsk utbildning, en praktiserande "
  
} else if (lang === "en") {
    document.documentElement.lang = 'en';
    // Navbar
    navHome.innerHTML = "Home";
    navTreat.innerHTML = "Treatments";
    navSurvey.innerHTML = "Survey";
    navGeneral.innerHTML = "General dentistry";
    navHygienist.innerHTML = "Dental hygienist";
    navSurgery.innerHTML = "Dental surgery";
    navProsthodontics.innerHTML = "Prosthodontics";
    navCosmetic.innerHTML = "Cosmetic dentistry";
    navPrice.innerHTML = "Prices";
    navContact.innerHTML = "Contakt";
    navAbout.innerHTML = "About";
 //About
    pTextAbout.innerHTML = "Dental Clinic has successfully treated patients since... <br><br> "

  } else if (lang === "pl") {
    document.documentElement.lang = 'pl';
    // Navbar
    navHome.innerHTML = "Start";
    navTreat.innerHTML = "Usługi";
    navSurvey.innerHTML = "Badania";
    navGeneral.innerHTML = "Stomatologia ogólna";
    navHygienist.innerHTML = "Higienistka stomatologiczna";
    navSurgery.innerHTML = "Chirurgia stomatologiczna";
    navProsthodontics.innerHTML = "Protetyka stomatologiczna";
    navCosmetic.innerHTML = "Stomatologia estetyczna";
    navPrice.innerHTML = "Ceny";
    navContact.innerHTMLu = "Kontakt";
    navAbout.innerHTML = "O nas";
    //About
    pTextAbout.innerHTML = "Klinika Dentystyczna skutecznie leczy pacjentów od... <br><br> Legitymujący się wyższym wykształceniem medycznym licencjonowany dentysta, praktykujący " 
  } 
};
document.getElementById("btnFlagSv").addEventListener("click", function() {
  changeLanguage("sv");
});

document.getElementById("btnFlagEn").addEventListener("click", function() {
  changeLanguage("en");
});
document.getElementById("btnFlagPl").addEventListener("click", function() {
  changeLanguage("pl");
});

index.html:

<html lang="sv">
    <script src="./langauge.js" defer></script>
</head>
<body>
        <!-- Navbar -->
        <nav id="navColor"
        class="navbar navbar-expand-lg navbar-dark py-3
        fixed-top shadow-lg p-3 mb-5 bg-body-tertiary" >
        <div class="container">
            <a id="tttext" href="./index.html" class="navbar-brand">Dental <img class="img-fluid"  src="./images/icons8-tooth-48.png" id="miniLogo" alt="minilogo"></a>
            <button class="navbar-toggler" 
                    type="button" 
                    data-bs-toggle="collapse" 
                    data-bs-target="#navmenu">
                    <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navmenu">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a href="./index.html" class="nav-link" id="nav-text" itemid="navHome">Hem</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a itemid="navTreat" class="nav-link dropdown-toggle" id="nav-text" role="button" data-bs-target="dropdown" aria-expanded="false">Behandlingar</a>
                        <ul class="dropdown-menu">
                            <a itemid="navSurvey" id="linkDrop" class="dropdown-item" href="./Treatments/survey.html">Undersökning</a>
                            <a itemid="navGeneral" id="linkDrop" class="dropdown-item" href="./Treatments/general.html">Allmänttandvård</a>
                            <a itemid="navHygienist" id="linkDrop" class="dropdown-item" href="./Treatments/hygienist.html">Tandhygienist</a>
                            <a itemid="navSurgery" id="linkDrop" class="dropdown-item" href="./Treatments/surgery.html">Tandkirurgi</a>
                            <a itemid="navProsthodontics" id="linkDrop" class="dropdown-item" href="./Treatments/prosthodontics.html">Protetik</a>
                            <a itemid="navCosmetic" id="linkDrop" class="dropdown-item" href="./Treatments/cosmetic.html">Estetyiskt Tandvård</a>
                        </ul>
                    </li>
                    <li class="nav-item">
                        <a itemid="navPrice" href="./prices.html" class="nav-link" id="nav-text">Priser</a>
                    </li>
                    <li class="nav-item">
                        <a itemid="navContact" href="./contact.html" class="nav-link" id="nav-text">Kontakt</a>
                    </li>
                    <li class="nav-item">
                        <a itemid="navAbout" href="./about.html" class="nav-link" id="nav-text">Om oss</a>
                    </li>
                </ul>
            </div>
        </div>
        </nav>
        <section id="shadowSec"></section>
   <br>
        <!-- LinkBar -->
        <section id="linkBar">
            <div class="container">
            <div  class="row">
            <div class="col" id="links">
                &nbsp;<a href=""></i></a>&nbsp;
                <a href=""></i></a>&nbsp;
                <i class="bi bi-telephone-fill"></i> 00
            </div>
            <div class="col" id="flags">
                <button onclick="changeLanguage('pl')"  id="btnFlagPl" type="button"><i class="flag flag-poland"></i></button>&nbsp;
                <button onclick="changeLanguage('sv')"  id="btnFlagSv" type="button"><i class="flag flag-sweden"></i></button>
                <button onclick="changeLanguage('en')"  id="btnFlagEn" type="button"><i class="flag flag-united-kingdom"></i></button>
            </div>
        </div> 
    </div>
        </section>
</body>
</html>

about.html:

   <script src="./js.js" defer></script>
    <script src="./langauge.js" defer></script>
</head>
<body>
        <!-- Navbar -->
        <nav id="navColor"
        class="navbar navbar-expand-lg navbar-dark py-3
        fixed-top shadow-lg p-3 mb-5 bg-body-tertiary" >
        <div class="container">
            <a id="tttext" href="./index.html" class="navbar-brand"><img class="img-fluid"  src="./images/icons8-tooth-48.png" id="miniLogo" alt="minilogo"></a>
            <button class="navbar-toggler" 
                    type="button" 
                    data-bs-toggle="collapse" 
                    data-bs-target="#navmenu">
                    <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navmenu">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a href="./index.html" class="nav-link" id="nav-text" itemid="navHome">Hem</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a itemid="navTreat" class="nav-link dropdown-toggle" id="nav-text" role="button" data-bs-target="dropdown" aria-expanded="false">Behandlingar</a>
                        <ul class="dropdown-menu">
                            <a itemid="navSurvey" id="linkDrop" class="dropdown-item" href="./Treatments/survey.html">Undersökning</a>
                            <a itemid="navGeneral" id="linkDrop" class="dropdown-item" href="./Treatments/general.html">Allmänttandvård</a>
                            <a itemid="navHygienist" id="linkDrop" class="dropdown-item" href="./Treatments/hygienist.html">Tandhygienist</a>
                            <a itemid="navSurgery" id="linkDrop" class="dropdown-item" href="./Treatments/surgery.html">Tandkirurgi</a>
                            <a itemid="navProsthodontics" id="linkDrop" class="dropdown-item" href="./Treatments/prosthodontics.html">Protetik</a>
                            <a itemid="navCosmetic" id="linkDrop" class="dropdown-item" href="./Treatments/cosmetic.html">Estetyiskt Tandvård</a>
                        </ul>
                    </li>
                    <li class="nav-item">
                        <a itemid="navPrice" href="./prices.html" class="nav-link" id="nav-text">Priser</a>
                    </li>
                    <li class="nav-item">
                        <a itemid="navContact" href="./contact.html" class="nav-link" id="nav-text">Kontakt</a>
                    </li>
                    <li class="nav-item">
                        <a itemid="navAbout" href="./about.html" class="nav-link" id="nav-text">Om oss</a>
                    </li>
                </ul>
            </div>
        </div>
        </nav>
        <section id="shadowSec"></section>
        <!-- LinkBar -->
        <section id="linkBar">
            <div class="container">
            <div  class="row">
            <div class="col" id="links">
                &nbsp;<a href=""><i class="bi bi-facebook"></i></a>&nbsp;
                <a href="""><i class="bi bi-instagram"></i></a>&nbsp;
                <i class="bi bi-telephone-fill"></i> 076-236-17-90
            </div>
            <div class="col" id="flags">
                <button onclick="changeLanguage('pl')"  id="btnFlagPl" type="button"><i class="flag flag-poland"></i></button>&nbsp;
                <button onclick="changeLanguage('sv')"  id="btnFlagSv" type="button"><i class="flag flag-sweden"></i></button>
                <button onclick="changeLanguage('en')"  id="btnFlagEn" type="button"><i class="flag flag-united-kingdom"></i></button>
            </div>
        </div> 
    </div>
        </section>
        <!-- Main -->
        <section class="m-5">
            <div class="container">
                <div class="row">
                    <div class="col">
                        <img src="./images/beautiful-girl-sitting-dentist-s-office (1).jpg" alt="img" class="img-thumbnail">
                        <br><br>
                        <img src="./images/beautiful-girl-sitting-dentist-s-office.jpg" alt="img" class="img-thumbnail">
                    </div>
                    <div id="textAboutUs" class="col">
                        <p itemid="pTextAbout"> har framgångsrikt arbetat med patienter sedan ... <br><br> En legitimerad tandläkare med högre medicinsk utbildning, en praktiserande tandläkare med mer än 17 års erfarenhet, deltar regelbundet i internationella dental konferenser, och en implantology kursens lärare.<br><br></p>
                    </div>
                </div>
            </div>
        </section>
</body>
</html>

komentarz 25 lutego 2023 przez VBService Ekspert (256,600 p.)
edycja 26 lutego 2023 przez VBService

BTW, fragment Twojego kodu

<ul class="dropdown-menu">
  <a itemid="navSurvey" id="linkDrop" class="dropdown-item" href="./Treatments/survey.html">Undersökning</a>
  <a itemid="navGeneral" id="linkDrop" class="dropdown-item" href="./Treatments/general.html">Allmänttandvård</a>
  <a itemid="navHygienist" id="linkDrop" class="dropdown-item" href="./Treatments/hygienist.html">Tandhygienist</a>
  <a itemid="navSurgery" id="linkDrop" class="dropdown-item" href="./Treatments/surgery.html">Tandkirurgi</a>
  <a itemid="navProsthodontics" id="linkDrop" class="dropdown-item" href="./Treatments/prosthodontics.html">Protetik</a>
  <a itemid="navCosmetic" id="linkDrop" class="dropdown-item" href="./Treatments/cosmetic.html">Estetyiskt Tandvård</a>
</ul>

i każdy <a> ma ten sam id z wartością linkDrop

The id global attribute defines an identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with CSS).

poza tym sprawdź prawidłowy zapis kodu dla <ul>

staraj się używać np. margin (css) zamiast  

np.

<div>
  <a href="#">Lorem</a><a href="#">Lorem</a><a href="#">Lorem</a>
</div>
<div>
  <a href="#">Lorem</a>&nbsp;<a href="#">Lorem</a>&nbsp;<a href="#">Lorem</a>
</div>
<div class="margin-example">
  <a href="#">Lorem</a><a href="#">Lorem</a><a href="#">Lorem</a>
</div>

<style>
  div {
    margin: 1em;
  }
  div.margin-example a:not(:first-child) {
    margin-left: 0.25em;
  }
</style>

dublowanie wywołania zdarzenia

document.getElementById("btnFlagSv").addEventListener("click", function() {
  changeLanguage("sv");
});
 
document.getElementById("btnFlagEn").addEventListener("click", function() {
  changeLanguage("en");
});
document.getElementById("btnFlagPl").addEventListener("click", function() {
  changeLanguage("pl");
});

<div class="col" id="flags">
    <button onclick="changeLanguage('pl')"  id="btnFlagPl" type="button"><i class="flag flag-poland"></i></button>&nbsp;
    <button onclick="changeLanguage('sv')"  id="btnFlagSv" type="button"><i class="flag flag-sweden"></i></button>
    <button onclick="changeLanguage('en')"  id="btnFlagEn" type="button"><i class="flag flag-united-kingdom"></i></button>
</div>

2 odpowiedzi

odpowiedź 23 lutego 2023 przez Comandeer Guru (607,060 p.)

Czy da się to ogarnać aby używać jednego pliku js ewentualnie 3 po jednym dla każdego języka czyli sv,pl oraz en?

Da się. Fajnie byłoby, jakbyś pokazał, czy są jakieś błędy w konsoli po przejściu na inną podstronę. Tak na oko – pobierasz sporo elementów i robisz na nich operacje, ale nie patrzysz, czy faktycznie te elementy istnieją na stronie. To może wykrzaczać całość.

- I jak zrobić że kiedy np zmieniam na stronie głównej język z polskiego na angielski i zmieniam stronę na np kontakt aby ten język który wybraliśmy się zapisał i żeby nie trzeba było zmieniać języka za każdym razem jak zmieniamy stronę ?

Zapisuj wybrany język do localStorage.

A tak przy okazji, IMO lepiej byłoby zrobić po prostu osobne podstrony dla poszczególnych języków i przełączanie by po prostu przekierowywało na odpowiednią. Takie rozwiązania JS-owe niekoniecznie polubią się np. z Google, który może mieć problemy z ogarnięciem, że istnieją jakieś inne wersje językowe.

komentarz 23 lutego 2023 przez AtomBari Początkujący (440 p.)
edycja 23 lutego 2023 przez AtomBari

Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')
    at changeLanguage (langauge.js:144:23)
    at HTMLButtonElement.<anonymous> (langauge.js:263:3)
changeLanguage @ langauge.js:144
(anonymous) @ langauge.js:263

np po kliknięciu na zmiane języka na en. Wygląda tak jakby navbar tłumaczy normalnie natomiast w momencie dojścia do sekcji która znajduję sie tylko w index.html a nie w about.html wywala błąd i przerywa tłumaczenia dalej. Wychodzi na to jakbym musiał stworzyć dla każdej strony osobny plik z language.js

W przypadku tworzenia podstrony do każdego języka i każdej zakładki about, contact, itd spowoduję stworzenie 20 stron html?

komentarz 23 lutego 2023 przez Comandeer Guru (607,060 p.)

Błąd wskazuje na to, o czym mówiłem – że nie sprawdzasz, czy dany element na stronie istnieje, tylko po prostu próbujesz mu ustawić treść przez innerHTML. Musiałbyś dodać ify sprawdzające, czy dany element istnieje, a jeśli tak – wtedy dodać do nich treść.

W przypadku tworzenia podstrony do każdego języka i każdej zakładki about, contact, itd spowoduję stworzenie 20 stron html?

Tak. Ale pytanie, czy to ostatecznie nie jest prostsze od takiego skryptu JS. Inna rzecz, że istnieją np. generatory statycznych stron, takie jak Astro czy 11ty, które pomagają w generowaniu tego typu podstron z szablonów. Więc można to sobie fajnie zautomatyzować. Problemem może być tutaj próg wejścia, jeśli chce się coś zrobić na szybko.

komentarz 23 lutego 2023 przez AtomBari Początkujący (440 p.)

Na czasie mi nie zależy chciałem wszystko zrobić sam ponieważ dopiero się uczę. Nie bardzo wiem jak działają te strony z generatorami w swoim czasię się pewnie tego nauczę póki co korzystam z bootstrapa.

Czyli ify to jedyne rozwiązanie a np probowałem wcześniej ogarnąc localStorage ale niestety mi to nie działało. Jak to ogarnąć albo jest jakiś inny sposób ?

komentarz 23 lutego 2023 przez AtomBari Początkujący (440 p.)

@Comandeer, ify pomogły ! dziękuję za pomysł :D teraz problemem jest zapisanie wybranego jeżyka aby strona automatycznie ładowała się w wcześniej wybranym języku.