Change website language using JSON, HTML, and JavaScript

Question

I have created a simple portfolio for myself which is currently in English. I also want to have it in German and other languages. To this end, I have an dropdown option box with the respective language. What I want to do is, once a language is selected, a javascript EventListener will notice this and change the language of the website to that language. I have a en.json and de.json file with the respective class name of the text and the text itself.

The dropdown option menu:

<select id="language" class="language">
                        <option>🏴󠁧󠁢󠁥󠁮󠁧󠁿 ENG</option>
                        <option>🇩🇪 DE</option>
                        <!-- <option>🇫🇷 FR</option> -->
                        <!-- <option>🇱🇺 LUX</option> -->

</select>

The following is an example of a div containing the class "RecentGrad" and "Name" as well as a sample of the json file structures. I have multiple texts to translate but I am only going to show one here for understanding:

<div class="header-text">
                <p class="RecentGrad"> Recent graduate & aspiring developer</p>
</div>

German json file:
{
"RecentGrad": "Hochschulabsolvent & angehender Entwickler"
}

English json file:
{
"RecentGrad": "Recent graduate & aspiring developer"
}

I have the barebones of a javascript done which listens for a change and is then supposed to do an action based on this change. I am relatively new to HTML, CSS, and JavaScript so I don't know how to go from here. I have looked at multiple tutorials and other stackoverflow topics with multilingual websites but I can't seem to get any of them to work.

<script>document.querySelector('#language').addEventListener("change", function() {
    if (this.value == "🏴󠁧󠁢󠁥󠁮󠁧󠁿 ENG") {
        // change all text to ENG
    }else if (this.value == "🇩🇪 DE"){
        // change all text to DE
    // }else if (this.value == "🇫🇷 FR"){
       // change all text to FR
    // }else if (this.value == "🇱🇺 LUX"){
       // change all text to LUX
    }
  });</script>

GrafiCode · Accepted Answer · 2022-09-04 20:13:25Z

Use for...in to extracts all keys from your language object, then iterate them all and use document.querySelector('.' + key).textContent to change translations.

const jsonDE = {
  "RecentGrad": "Hochschulabsolvent & angehender Entwickler"
}

const jsonEN = {
  "RecentGrad": "Recent graduate & aspiring developer"
}


document.querySelector('#language').addEventListener("change", function() {
  if (this.value == "🏴󠁧󠁢󠁥󠁮󠁧󠁿 ENG") {
    // change all text to ENG
    for (let key in jsonEN) {
      document.querySelector('.' + key).textContent = jsonEN[key]
    }
  } else if (this.value == "🇩🇪 DE") {
    // change all text to DE
    for (let key in jsonDE) {
      document.querySelector('.' + key).textContent = jsonDE[key]
    }
    
  // }else if (this.value == "🇫🇷 FR"){
    // change all text to FR
  // }else if (this.value == "🇱🇺 LUX"){
    // change all text to LUX
  }
});

<select id="language" class="language">
  <option>🏴󠁧󠁢󠁥󠁮󠁧󠁿 ENG</option>
  <option>🇩🇪 DE</option>
  <!-- <option>🇫🇷 FR</option> -->
  <!-- <option>🇱🇺 LUX</option> -->
</select>

<div class="header-text">
  <p class="RecentGrad"> Recent graduate & aspiring developer</p>
</div>

mrocha · Accepted Answer · 2022-09-04 20:23:41Z

1

const switchLanguage = (code) => {
    const languages = {
    de: {
      RecentGrad: "Hochschulabsolvent & angehender Entwickler",
      SomethingElse: "Something else in german",
    },
    en: {
      RecentGrad: "Recent graduate & aspiring developer",
      SomethingElse: "Something else",
    }
    };
  for(let lang of Object.keys(languages['de'])) {
    document.querySelector(`.${lang}`).innerText = languages[code][lang]
  }
}

document.querySelector('#language').addEventListener("change", function () {
    switchLanguage(this.value);
});

<select id="language" class="language">
  <option value="en">🏴󠁧󠁢󠁥󠁮󠁧󠁿 ENG</option>
  <option value="de">🇩🇪 DE</option>
  <!-- <option>🇫🇷 FR</option> -->
  <!-- <option>🇱🇺 LUX</option> -->
</select>

<div class="header-text">
   <p class="RecentGrad"> Recent graduate &amp; aspiring developer</p>
</div>

<div class="header-text">
   <p class="SomethingElse"> Something else text</p>
</div>

answered Sep 4, 2022 at 20:23

mrocha

905 bronze badges

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Jorgen · Accepted Answer · 2022-09-04 20:24:39Z

Utilize the keys in the json object (e.g. RecentGrad) to get the elements you need :) I just did a flip instead of dropdown for simplicity.

HTML:

<button id="btn">Flip</button>
<h1 id="welcomeText"></h1>
<h1 id="leaveText"></h1>

JS:

const english = {
    "welcomeText": "Hi how are you?",
    "leaveText": "See ya!"
}

const norwegian = {
    "welcomeText": "Hei hvordan går det?",
    "leaveText": "Vi snakkes!"
}

let lang = "eng"

let btn = document.getElementById("btn");
btn.onclick = (e)=>{
    // Flip the language we are using
    if(lang==="eng"){
        lang="nor"
        Object.keys(norwegian).forEach((key)=>{
            document.getElementById(key).textContent = norwegian[key];
        })
    }
    else {
        lang="eng"
        Object.keys(english).forEach((key)=>{
            document.getElementById(key).textContent = english[key];
        })
    }

}

Collectives™ on Stack Overflow

Change website language using JSON, HTML, and JavaScript

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related