CODEWITHSUNDEEP
javascripthtmlcss
Alexander Veheecke
Alexander Veheecke

Reputation: 47

Change website language using JSON, HTML, and JavaScript

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>

Upvotes: 2

Views: 3174

Answers (3)

Jorgen
Jorgen

Reputation: 93

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];
        })
    }

}

Upvotes: 0

mrocha
mrocha

Reputation: 90

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>

Upvotes: 1

GrafiCode
GrafiCode

Reputation: 3364

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>

Upvotes: 2

Related Questions