Related Articles

Related Articles

How to switch the language of the page using JavaScript ?
  • Last Updated : 16 Nov, 2020

In this article, we will describe the method to switch between languages of a page depending upon the choice of the user.

The method works by using the hash fragment of the URL as an identifier that can be used later detected by the script to change the language. The hash is accessed using window.location.hash property in JavaScript and can be later checked for the needed language identifier.

The following steps have to be followed for this approach:

Step 1: We define a function that accepts the language identifier as a string and sets it as the hash fragment of the URL. We will then reload the page using the location.reload() method.

Step 2: We store all the contents of the page in an object so that it could be easily retrieved by the script depending on the language.



Step 3: We will next check if the current hash value is equal to the language tag we want, and therefore set the relevant content of the language from the object we have defined above.

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

// Create a function to change the hash 
// value of the page and reload it
function changeLanguage(lang) {
  location.hash = lang;
  location.reload();
}
  
// Define the language reload anchors
var language = {
  eng: {
    welcome:
      "Welcome to the GeeksforGeeks " +
      "Portal! You can choose any " +
      "language using the buttons above!",
  },
  es: {
    welcome:
      "¡Bienvenido al portal GeeksforGeeks! " +
      "¡Puedes elegir cualquier idioma usando " +
      "los botones de arriba!",
  },
  hin: {
    welcome:
      "GeeksforGeeks पोर्टल पर आपका स्वागत है! " +
      "आप ऊपर दिए गए बटन का उपयोग करके किसी भी " +
      "भाषा को चुन सकते हैं!",
  },
};
  
// Check if a hash value exists in the URL
if (window.location.hash) {
  
  // Set the content of the webpage
  // depending on the hash value
  if (window.location.hash == "#es") {
    siteContent.textContent = language.es.welcome;
  } else if (window.location.hash == "#hin") {
    siteContent.textContent = language.hin.welcome;
  }
}

chevron_right


Example: This example demonstrates the above approach by displaying three buttons for the user to choose any language, and changing the language upon clicking the button.

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<body>
  <h1 style="color: green">
    GeeksforGeeks
  </h1>
    
  <p>
    Click on the buttons below to change
    the language of the webpage.
  </p>
  
  <!-- Define the buttons that will 
  change the language of the page 
  and reload it -->
  <button onclick="changeLanguage('eng')">
    Change to English<
    /button>
  <button onclick="changeLanguage('es')">
    Change to Spanish
  </button>
  <button onclick="changeLanguage('hin')">
    Change to Hindi
  </button>
  
  <!-- Define the content of the page
  that would be changed -->
  <p id="siteContent">
    Welcome to the GeeksforGeeks Portal! 
    You can choose any language using the
    buttons above!
  </p>
  
  
  <script>
    // Create a function to change
    // the hash value of the page
    function changeLanguage(lang) {
      location.hash = lang;
      location.reload();
    }
  
    // Define the language reload anchors
    var language = {
      eng: {
        welcome: "Welcome to the GeeksforGeeks " +
        "Portal! You can choose any language " + 
        "using the buttons above!"
      },
      es: {
        welcome: "¡Bienvenido al portal GeeksforGeeks! " +
        "¡Puedes elegir cualquier idioma usando " +
        "los botones de arriba!"
      },
      hin: {
        welcome: "GeeksforGeeks पोर्टल पर आपका स्वागत है! " +
        "आप ऊपर दिए गए बटन का उपयोग करके किसी भी " + 
        "भाषा को चुन सकते हैं!"
      }
    };
  
    // Check if a hash value exists in the URL
    if (window.location.hash) {
  
      // Set the content of the webpage 
      // depending on the hash value
      if (window.location.hash == "#es") {
        siteContent.textContent =
          language.es.welcome;
      }
      else if (window.location.hash == "#hin") {
        siteContent.textContent =
          language.hin.welcome;
      }
    }
  </script>
</body>
  
</html>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up
Recommended Articles
Page :