CODEWITHSUNDEEP
javascripthtmlmultilingualmulti-page-application
Kaan Vural
Kaan Vural

Reputation: 41

How can I add multilanguage support across multiple HTML pages?

I have a multi-page website. I tried to add multi-language support, and this is what I've got so far;

I have a div in 2 different HTML files.

<div class="langwrap" style="text-align: right;">
  <a href="#" data-lang="en">EN</a>
  <a href="#" class="activated" data-lang="tr">RU</a>
</div>

script.js file includes;

document.addEventListener('DOMContentLoaded', function() {
const langwrap = document.querySelector(".langwrap"),
link = langwrap.querySelectorAll("a"),  
elements = {....} // All of my text in website.
let lang = localStorage.getItem("langwrap") || "tr";
const data = {EN: {}, RU:{} } //translations});


link.forEach((el, i) => {
    el.addEventListener('click', () => {
        langwrap.querySelectorAll(".activated").forEach((element) => {
            element.classList.remove("activated");
        });
        el.classList.add("activated");

        const attr = el.dataset.lang;
        lang = attr;
        localStorage.setItem("langwrap", attr);
        localStorage.setItem("langIndex", i);
        changeLang(lang, elements);
    });
});

function changeLang(lang, elements) {
    document.documentElement.lang = lang;
    for (const key in elements) {
        if (elements.hasOwnProperty(key)) {
            const element = elements[key];
            if (element) {
                element.textContent = data[lang][key];
            }
        }
    }

}
});

When a user moves to another page language selection does not remain, how to handle that? (no BE or framework) Thanks

Upvotes: 0

Views: 101

Answers (1)

Kaan Vural
Kaan Vural

Reputation: 41

    if (lang === "en") {
    langwrap.querySelector(".activated").classList.remove("activated");
    link[0].classList.add("activated");
    changeLang("en", elements)
} else {
    langwrap.querySelector(".activated").classList.remove("activated");
    link[index].classList.add("activated");
    changeLang(lang, elements)
}

worked for me.

Upvotes: -1

Related Questions