How to switch the language of the page using JavaScript ? Last Updated : 19 Sep, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report 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.ApproachHTML 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: Comment More infoAdvertise with us Next Article How to specify language of the target URL in HTML5 ? R rohit2sahu Follow Improve Article Tags : JavaScript Technical Scripter 2020 JavaScript-Questions Similar Reads How to detect the browser language preference using JavaScript ? Detecting the language preferences of users can be very important for Websites or Web Apps to increase user interaction. In JavaScript, this task can be easily done by using the Languages property available for the navigator interface. The navigator.language and the navigator.languages property toge 2 min read How to modify URL without reloading the page using JavaScript ? In this article, we are going to see how to modify URL without reloading the page using JavaScript Below are the methods to modify the URL without reloading the page using JavaScript: Table of Content Replacing the current state with replaceState() MethodAdding a new state with pushState() MethodMet 3 min read How to dynamically change the title of web page using JavaScript ? Dynamically changing the title of a webpage using JavaScript refers to updating the content of the `<title>` element in the HTML document without reloading the page. This allows developers to modify the page title based on user interaction or other conditions in real-time.For changing the page 2 min read How to specify language of the target URL in HTML5 ? In this article, we will learn how to set the language of the target URL in HTML5. The task can be done by using the hreflang attribute while using the <area> tag. This property contains the value i.e languageCode which represents the two-letter code of the linked document language. Note: If t 1 min read How to Switch Between Multiple CSS Stylesheets using JavaScript? To switch between multiple CSS stylesheets using JavaScript, the href attribute of the <link> element can be changed dynamically in the HTML document that links to the stylesheets. <link id="theme" rel="stylesheet" type="text/css" href="light.css" /> The "href" attribute specifies the fi 2 min read How to Toggle Text with JavaScript? Toggling text is a common functionality in web development. Text toggling means switching between two or more text values when a user performs a specific action, such as clicking a button. This feature can be used in creating expandable/collapsible sections, toggling visibility of text etc.Below are 2 min read Like