I want to translate my webpage only for Hindi Language by clicking a custom button. When I clicked this button. Select Option value change only not translating the webpage. Can some one help me to fix this issue?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Google Translater for Website </title>
</head>
<body>
<h2>Your Web Page</h2>
<p>Click on the dropdown button to translate.</p>
<p>Translate this page:</p>
<div id="google_translate_element"></div>
// page should be translate after click on this button
<button type="button" id="hindi">T into Hindi</button>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"></script>
<p class="notranslate"> This Paragraph will remain same because it is using notranslate class.</p>
<p class="translate"> This Paragraph will change because it is using translate class. </p>
<script>
$('#hindi').on('click', function(){
$('select.goog-te-combo')
.val('hi')
.trigger('change');
})
</script>
</body>
</html>