DEV Community

Discussion on: Help: How to make a multilanguage website?

View post
Collapse
 
kspeakman profile image
Kasey Speakman • • Edited

We have done this for one of our apps in a very simple way. It was a matter of taking all the text and putting it in a key/value collection (a JS object).

var en_us = {
    welcome: "Welcome!"
}

var fr_ca = {
    welcome: "Salut!"
}

var lang = en_us;

// set all the text
document.getElementById("welcome").innerHTML = lang.welcome;
Enter fullscreen mode Exit fullscreen mode

This is off-the-top sketch, may not run. You could also be more clever here and have the IDs of the elements containing text exactly match the property names. Then you could write a few lines of code to loop through all the keys in the dictionary and set the text on the corresponding HTML element with the same ID.

That could facilitate developing the site once and having a JS function switch all the text out when the user changes languages.

Our case was slightly different since it was in Elm, but the concept of having two different "dictionaries" and swapping them out is similar.