Home > Article > Web Front-end > How to switch page language using JavaScript?

How to switch page language using JavaScript?

WBOYforward: 2023-09-15 14:53:101311browse

Whenever you develop a website or app for a global business, you must also focus on language that your audience can understand. For example, English is an international language, but in some parts of the world, people cannot understand English because they speak German, Spanish, etc.

However, if you observe, some websites provide the option to change the language of the website. You can change the language of your entire website with just a click of a button. Have you ever wondered how this is possible?

Here, we will learn to use JavaScript to switch the language of the web page.

grammar

Users should use JavaScript to change the web page language according to the following syntax.

if (lang == "en") {
   element.innerHTML = "content";
} else if (lang == "fr") {
   element.innerHTML = "content";
} else if (lang == "de") {
   element.innerHTML = "content";
}

In the above syntax, we have written if-else statements to change the content of the web page according to the selected language. Users need to replace content with content in a specific language.

Example 1

In the example below, we have added some div element content. Whenever the user presses any button to change the language of the web page, we call the changeLanguage() function by passing the language as parameter. In the changeLanguage() function, we access the div element and change its content according to the selected language.

<html>
<body>
   <h2>Switching the language of web page using JavaScript</h2>
   <div id = "div">Hi How are you! This is written in English.</div><br>
   <div id = "languageSwitcher">
      <button onclick = "changeLanguage('en')"> English </button>
      <button onclick = "changeLanguage('fr')"> French </button>
      <button onclick = "changeLanguage('de')"> German </button>
   </div>
   <script>
      // function to switch language of web page
      function changeLanguage(lang) {
         let element = document.getElementById("div");
         if (lang == "en") {
            element.innerHTML = "Hi How are you! This is written in English.";
         } else if (lang == "fr") {
            element.innerHTML = "Bonjour Comment allez-vous! Cela est écrit en français.";
         } else if (lang == "de") {
            element.innerHTML = "Hallo Wie geht es dir! Das ist auf Deutsch geschrieben.";
         }
      }
   </script>
</body>
</html>

Example 2

In the example below, we create a web page that contains multiple elements. Additionally, we gave each element a unique id. In JavaScript, we create an object called "languageContent". In the object, we store the language as the key and the content as the value. In the content object, we use the element id as the key and its language-specific content as the value.

In the switchLang() function, we access the content of a specific language from the languageContent object and replace the content of all elements on the web page.

<html>
<body>
   <h2>Switching the language of web page using JavaScript</h2>
   <div id = "text1"> This is a sample content </div>
   <div id = "language"> English </div>
   <div id = "BrandName"> TutorialsPoint </div>
   <div id = "Programming_lang"> JavaScript </div>
   <div id = "languageSwitcher">
      <button onclick = "swithcLang('en')"> English </button>
      <button onclick = "swithcLang('fr')"> French </button>
      <button onclick = "swithcLang('es')"> German </button>
   </div>
   <script>
      let languageContent = {
         "en": {
            "text1": "This is a sample content",
            "language": "English",
            "BrandName": "TutorialsPoint",
            "Programming_lang": "JavaScript",
         },
         "fr": {
            "text1": "Ceci est un contenu d'exemple",
            "language": "Français",
            "BrandName": "TutorialsPoint",
            "Programming_lang": "JavaScript",
         },
         "es": {
            "text1": "Este es un contenido de ejemplo",
            "language": "Español",
            "BrandName": "TutorialsPoint",
            "Programming_lang": "JavaScript",
         }
      }
      function swithcLang(lang) {
         for (let key in languageContent[lang]) {
            document.getElementById(key).innerHTML = languageContent[lang][key];
         }
      }
   </script>
</body>
</html>

Users have learned to use JavaScript to switch web page languages. In the first example, we give a demonstration of how to switch between multiple languages.

We can use the second example for a live website. Developers need to create a JSON file to store the content instead of in the same file because real-time applications may contain large amounts of content. Afterwards, they can use a for loop to iterate over all elements of the JSON file and update the content of the web page.

The above is the detailed content of How to switch page language using JavaScript?. For more information, please follow other related articles on the PHP Chinese website!

JavaScript json if for 循环对象

Statement：

This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete

Previous article：10 fun things you can do with just a few lines of JavaScriptNext article：10 fun things you can do with just a few lines of JavaScript

See more

How to switch page language using JavaScript?

grammar

Example 1

Example 2

Related articles