my code have two buttons, each button has a value for a specific language, i use google translator for this code, so i copied a function from stackoverflow that turn website into one specific language. the link is given below where from i copy it.
change of language on button click works, and it also works when i change it back to default language, but it does not work when i click on button again to change the language, it shows some other language on google toolbar but it works if i press it once more.
so kindly check this function, that it works good on first click but not on second click, and again works on third click, and so on.
i took a code from (Javascript/Jquery call Google Translate on button click (with flags)) i didnt change the function of it, just add two buttons.
<!DOCTYPE html>
<html lang="en-US">
<body>
<h1>My Web Page</h1>
<p>Hello everybody!</p>
<p>Translate this page.</p>
<!-- hide auto-created selection field completely by hiding it's container -->
<div id="google_translate_element" style="display:none"></div>
<p>You can translate the content of this page by selecting a language in the input field.</p>
<!-- flag: you can choose language here: en, de, af etc. -->
<button value="ur" id="urLanguage"
onclick="changeLanguageToUrduByButtonClick()">Urdu</button>
<button class="notranslate" value="en" id="enLanguage"
onclick="changeLanguageToEngByButtonClick()" style="display:none;">English</button>
</body>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: "en"}, 'google_translate_element');
}
function changeLanguageToUrduByButtonClick() {
var x = document.getElementById("urLanguage");
x.style.display = "none";
var y = document.getElementById("enLanguage");
y.style.display = "block";
var language = document.getElementById("urLanguage").value;
var selectField = document.querySelector("#google_translate_element select");
for(var i=0; i < selectField.children.length; i++){
var option = selectField.children[i];
// find desired langauge and change the former language of the hidden selection-field
if(option.value==language){
selectField.selectedIndex = i;
// trigger change event afterwards to make google-lib translate this side
selectField.dispatchEvent(new Event('change'));
break;
}
}
}
function changeLanguageToEngByButtonClick() {
var x = document.getElementById("enLanguage");
x.style.display = "none";
var y = document.getElementById("urLanguage");
y.style.display = "block";
var language = document.getElementById("enLanguage").value;
var selectField = document.querySelector("#google_translate_element select");
for(var i=0; i < selectField.children.length; i++){
var option = selectField.children[i];
// find desired langauge and change the former language of the hidden selection-field
if(option.value==language){
selectField.selectedIndex = i;
// trigger change event afterwards to make google-lib translate this side
selectField.dispatchEvent(new Event('change'));
break;
}
}
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?
cb=googleTranslateElementInit"></script>
</html>