Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to switch the language of the page using JavaScript?
Whenever you develop a website or application for a worldwide business, you must also focus on which language your audience can understand. For example, English is an international language, but in some parts of the world, people don’t understand English as they speak German, Spanish etc.
However, if you have observed, then some websites provide the option to change the website's language. You just need to click on the button, which changes the whole website's language. Have you ever thought about how it is possible?
Here, we will learn to switch the language of the web page using JavaScript.
Syntax
Users should follow the syntax below to change the language of the web page using JavaScript.
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 the if-else statement to change the content of the web page according to the language selected. Users need to replace the content with the content of a particular language.
Example 1
In the example below, we added some div element content. Whenever users press any button to change the web page's language, we invoke the changeLanguage() function by passing the language as a parameter. In the changeLanguage() function, we access the div element and change its content according to the language selected.
<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
We have created a web page with multiple elements in the example below. Also, we have given the unique id to every element. In JavaScript, we have created the object named ‘languageContent’. In the object, we have stored the language as a key and the content as a value. In the content object, we have used the element id as a key and its content in a particular language as a value.
In the switchLang() function, we access the content of a particular 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 learned to switch the language of a web page using JavaScript. In the first example, we have given a demo of how we can switch between multiple languages.
We can use the second example for the real-time website. Developers need to create a JSON file to store the content rather than in the same files, as real-time apps can have lots of content. After that, they can use for loop to iterate through all elements of the JSON file and update the content of the webpage.
6K+ Views
