Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
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.
Basic Language Switching Example
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>
Advanced Multi-Element Language Switching
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="switchLang('en')"> English </button>
<button onclick="switchLang('fr')"> French </button>
<button onclick="switchLang('es')"> Spanish </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 switchLang(lang) {
for (let key in languageContent[lang]) {
document.getElementById(key).innerHTML = languageContent[lang][key];
}
}
</script>
</body>
</html>
Best Practices for Language Switching
For real-time websites, consider these improvements:
- External JSON Files: Store translations in separate JSON files rather than embedding them in JavaScript
- Dynamic Loading: Load translation files on demand to reduce initial page load
- URL Parameters: Save language preference in URL or localStorage for persistence
- Fallback Content: Always provide fallback text in case translations are missing
Comparison of Approaches
| Method | Best For | Pros | Cons |
|---|---|---|---|
| If-else statements | Simple pages | Easy to implement | Hard to maintain with many elements |
| Object-based approach | Complex pages | Scalable, organized | Requires more initial setup |
| External JSON files | Large applications | Professional, maintainable | Requires server or build process |
Conclusion
JavaScript language switching can be implemented using simple if-else conditions for basic pages or object-based approaches for complex websites. For production applications, consider using external JSON files and implementing proper fallback mechanisms for better user experience.
9K+ Views
