For those interested, the live server can be accessed at .
After creating 3 buttons that change the language of the website when clicked, the issue arose where the JavaScript code worked perfectly on localhost but failed to function properly on the online server.
<head id="Head1">
<title>Google Translation</title>
<style>
.margin{
margin: 40px 0;
}
.buttons{
display: flex;
}
.button{
margin: 1em;
border-radius: 4px;
cursor: pointer;
transition: all 0.3s ease;
border: 1px solid black;
background-color:#232B38;
}
.button{
background-color: #232B38;
padding: 1em;
}
.buttons li{
list-style: none;
}
.button {
color: #FFFFFF;
}
.button {
text-decoration: none;
}
.button:hover{
background-color: #FFFFFF;
transition: 0.5s ease-in-out;
}
.button:hover{
color: #232B38;
transition: 0.5s ease-in-out;
}
.button span{
font-size: 1.2rem;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="google_translate_element" style="display: none">
</div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({ pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, autoDisplay: false }, 'google_translate_element');
}
</script>
<script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"
type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
function translateLanguage(lang) {
var $frame = $('.goog-te-menu-frame:first');
if (!$frame.size()) {
alert("Error: Could not find Google translate frame.");
return false;
}
$frame.contents().find('.goog-te-menu2-item span.text:contains(' + lang + ')').get(0).click();
return false;
}
</script>
<div class="margin">
<ul class="buttons">
<li><a class="button" href="javascript:;" id="Chinese" onclick="translateLanguage(this.id);"><span> Chinese</span></a> </li></button>
<li><a class="button" href="javascript:;" id="Korean" onclick="translateLanguage(this.id);"><span> Korean</span></a> </li></button>
<li><a class="button" href="javascript:;" id="Japanese" onclick="translateLanguage(this.id);"><span> Japanese</span></a> </li></button>
</ul>
</div>
<div>
Hello
</div>
</form>
</body>
</html>