Hi, I found a resource online that gives a step-by-step guide on how to write javascript code to translate a page from English to any language (in my case it’s Polish) by creating javascript files named index.js, translate.js, en.json and pl.json. I made a quick test by translating the navbar from English to Polish using the onload function. As soon as the page loads the navbar is translated from English to Polish, however, when I click on the ‘ENG’ menu link or ‘POL’ menu link located on the right side of the navbar, the webpage does not translate it to both those languages upon clicking it. I have tried using the onclick function for both these links but it did not work. If someone could help me with this problem it would be greatly appreciated. Thanks.
“index.js”: on Visual Studio Code, the .ready, .click, .click methods are deprecated.
function translate(lng, tagAttr){
var translate = new Translate();
translate.init(tagAttr, lng);
translate.process();
if(lng == 'en'){
$("#enTranslator").css('color', '#f4623a');
$("#plTranslator").css('color', '#212529');
}
if(lng == 'pl'){
$("#plTranslator").css('color', '#212529');
$("#enTranslator").css('color', '#f4623a');
}
}
$(document).ready(function(){
//this is id of HTML element (English) with attribute lng-tag
$("#enTranslator").click(function(){
translate('en', lng-tag);
});
//This is id of HTML element (polish) with attribute lng-tag
$("#plTranslator").click(function(){
translate('pl', lng-tag);
});
});`
“translate.js”:
function Translate(){
//initialization
this.init = function(attribute, lng){
this.attribute = attribute;
this.lng = lng;
}
//translate
this.process = function(){
_self = this;
var xrhFile = new XMLHttpRequest();
//load content data
xrhFile.open("GET", "lng/"+this.lng+".json", false);
xrhFile.onreadystatechange = function ()
{
if(xrhFile.readyState === 4)
{
if(xrhFile.status === 200 || xrhFile.status == 0)
{
var LngObject = JSON.parse(xrhFile.responseText);
var allDom = document.getElementsByTagName("*");
for(var i = 0; i < allDom.length; i++){
var elem = allDom[i];
var key = elem.getAttribute(_self.attribute);
if(key != null){
elem.innerHTML = LngObject[key];
}
}
}
}
}
xrhFile.send();
}
}
“en.json”:
{
"home":"Home",
"about":"About",
"agent":"Agent",
"services":"Services",
"blog":"Blog",
"contact":"Contact"
}
“pl.json”:
{
"home":"Home",
"about":"O Nas",
"agent":"Agenci",
"services":"Usługi",
"properties":"Nieruchomości",
"blog":"Blog",
"contact":"Kontakt"
}
<body id="page-top" onload="translate('pl','lng-tag')">
<nav class="navbar navbar-expand-lg navbar-dark ftco_navbar bg-dark ftco-navbar-light" id="ftco-navbar" style="background-color: #0C0F24;">
<div class="container">
<a class="navbar-brand" href="index.html">Uptown</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#ftco-nav" aria-controls="ftco-nav" aria-expanded="false" aria-label="Toggle navigation">
<span class="oi oi-menu"></span> Menu
</button>
<div class="collapse navbar-collapse" id="ftco-nav">
<ul class="navbar-nav ml-auto">
<li class="nav-item active"><a href="index.html" class="nav-link" lng-tag="home">Home</a></li>
<li class="nav-item"><a href="about.html" class="nav-link" lng-tag="about">About</a></li>
<li class="nav-item"><a href="agent.html" class="nav-link" lng-tag="agent">Agent</a></li>
<li class="nav-item"><a href="services.html" class="nav-link" lng-tag="services">Services</a></li>
<li class="nav-item"><a href="properties.html" class="nav-link" lng-tag="properties">Properties</a></li>
<li class="nav-item"><a href="blog.html" class="nav-link" lng-tag="blog">Blog</a></li>
<li class="nav-item"><a href="contact.html" class="nav-link" lng-tag="contact">Contact</a></li>
<li class="nav-item"><button class="nav-link lng" id="enTranslator">ENG</button> </li>
<li class="nav-item"><button class="nav-link lng" id="plTranslator">POL</button> </li>
</ul>
</div>
</div>
</nav>