JavaScript simple and basic localization functionality

You want to provide localization capability to your web app? In this tutorial I’ll show you how to do it. Let’s watch this video tutorial and grab the source code below.

<!DOCTYPE html>
<html>
	<head>
		<title>ZK Tutorials</title>
		<style>
			.somebutton{
				width: 100px; background-color: black; color: white; padding: 10px; margin: 10px;
			}
		</style>
	</head>
	<body>
		<h1 id="myTitle">Basic Localization with JavaScript</h1>
		<button onclick="showAlert()" id="myButton">Show Alert</button>
		<div class="somebutton" onclick="setLang('en')">EN</div>
		<div class="somebutton" onclick="setLang('id')">ID</div>
		<div class="somebutton" onclick="setLang('jv')">JV</div>
		<script>
			
			var defaultLang = "en";
			var language = defaultLang;
			
			setLang(language);
			
			function setLang(newlang){
				language = newlang;
				document.getElementById("myTitle").innerHTML = localize("title", language);
				document.getElementById("myButton").innerHTML = localize("alertBtn", language);
			}
			
			function showAlert(){
				alert(localize("alertMsg", language));
			}
			
			function localize(txt, language){
				var lclzdText;
				switch(language){
					case "en" :
						if(txt == "title")
							lclzdText = "Basic Localization with JavaScript";
						if(txt == "alertBtn")
							lclzdText = "Show Alert";
						if(txt == "alertMsg")
							lclzdText = "This is my message.";
						break;
					case "id" :
						if(txt == "title")
							lclzdText = "Localization sederhana dengan JavaScript";
						if(txt == "alertBtn")
							lclzdText = "Tampilkan Pesan";
						if(txt == "alertMsg")
							lclzdText = "Ini adalah pesan saya.";
						break;
					case "jv" :
						if(txt == "title")
							lclzdText = "Nggawe Localization seng gampang";
						if(txt == "alertBtn")
							lclzdText = "Ketokno Tulisan";
						if(txt == "alertMsg")
							lclzdText = "Iki tulisanku";
						break;
				}
				return lclzdText;
			}

		</script>
	</body>
</html>

Post Views: 419