How to switch the language of the page using JavaScript ?

Last Updated : 19 Sep, 2024

Switching the language of a webpage using JavaScript involves dynamically changing the text content based on the user's language selection. This can be done by loading language-specific text from a predefined dataset, translating page elements, or reloading content from a localized source using JavaScript.

Approach

HTML Structure: The page includes a heading, a paragraph for content, and three buttons that trigger language change functionality when clicked.
Button Styling: Buttons use default styling, with no additional CSS modifications applied for layout or design beyond basic positioning.
Text Styling: The heading is styled inline using style="color: green", and the paragraph has default text styling, with no specific CSS applied.
JavaScript for Hash Change: The changeLanguage function updates the URL hash when a button is clicked, setting the language indicator (e.g., #eng, #es).
Language Translation Data: An object stores language-specific content in English, Spanish, and Hindi, allowing easy access for updating the webpage dynamically.
Dynamic Content Update: The script checks the current URL hash and updates the content of the siteContent paragraph with the relevant translated text.

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

<!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
        let 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>

Output:

How to specify language of the target URL in HTML5 ?

rohit2sahu

Improve

Article Tags :

How to switch the language of the page using JavaScript ?

Approach

Similar Reads

Thank You!

What kind of Experience do you want to share?