Ways to switch language on website with pure JS-CodePudding

I don't know which is the best way to follow to translate my page, my first idea is to when i switch to language like english then remove Body and insert other body with english language, second idea is like below:

const btn = document.querySelector('.toggle');
const currentLang = document.querySelectorAll('.current-lang');
const hiddenLang = document.querySelectorAll('.hidden-lang');

btn.addEventListener('click', () => {

  currentLang.forEach((item) => {
    item.classList.remove('current-lang');
    item.classList.add('hidden-lang');
  });

  hiddenLang.forEach((item) => {
    item.classList.remove('hidden-lang');
    item.classList.add('current-lang');
  });



});

.current-lang {
  display: block;
}

.hidden-lang {
  display: none;
}

<p >Una pizza italiano unica e adorabile con pesto di pomodoro, prosciutto, pancetta e pepe.</p>
<br>
<p >A unique and adorable Italian Pizza with tomato pesto, ham, bacon and pepper.</p>


<button >Change</button>

If you have more simple ways and efficient i will appreciate it if share it with me!

CodePudding user response：

you can also use the lang attribute

const 
  btn   = document.querySelector('.toggle')
, langs = ['it','en-GB']
  ;

var currentLang = langs.indexOf( document.body.lang);
 
btn.addEventListener('click', () => 
  {
  currentLang =   currentLang % langs.length
  document.body.lang = langs[currentLang]
  });

body:lang(it)    *:not(:lang(it)) ,
body:lang(en-GB) *:not(:lang(en-GB))
  {
  display: none;
  }

<body lang="it">
  
  <p lang="it">Una pizza italiano unica e adorabile con pesto di pomodoro, prosciutto, pancetta e pepe.</p>
  <p lang="en-GB">A unique and adorable Italian Pizza with tomato pesto, ham, bacon and pepper.</p>


  <button >Change</button>
</body>

CodePudding user response：

There are multiple approaches to this, but if you don't want to use any framework or library whatsoever, then:

You could set a global variable:

let language = "english"

And an i18n.js file containing all texts in your application.

export function useText(language) { // language would be the current string
  switch(language) {
    case "english":
    return useEnglish()
    case "italian":
    return useItalian()
  }
}

const useEnglish = () => ({
  pizzaText: "A unique and adorable Italian Pizza with tomato pesto, ham, bacon and pepper",
})

const useItalian = () => ({
  pizzaText: "Una pizza italiano unica e adorabile con pesto di pomodoro, prosciutto, pancetta e pepe",
})

And to get the text you would only need to do the following:

const text = useText(currentLanguage).pizzaText

And you could set it to the html using whatever javascript method you normally use.

This would mean that all of your text in pages would need to consume this function, and every time you add some text you would need to extend this file.

It will help you organize and know easier if a translation is wrong or if there is a translation missing.