google translate - How can I add language translator with custom flag in my website using javascript?

I am using php and javascript. I want to add the custom language selector with country flag in my website. I write the following code from w3schools tutorial;

<!DOCTYPE html>
<html lang="en-US">

<body>

    <h1>My Web Page</h1>

    <p>Hello everybody!</p>

    <p>Translate this page:</p>

    <div id="google_translate_element"></div>

    <script type="text/javascript">
        function googleTranslateElementInit() {
            new google.translate.TranslateElement({ pageLanguage: 'en' }, 'google_translate_element');
        }
    </script>

    <script type="text/javascript"
        src="//translate.google/translate_a/element.js?cb=googleTranslateElementInit"></script>

    <p>You can translate the content of this page by selecting a language in the select box.</p>

</body>

</html>

Instate of all the language, I am interested on only three languages (Tajik, Russian, English). I put this language flag like this;

<div class="flag">
      <a href="#" class="eng" data-lang="eng"><img class="img-fluid" src="./img/flag-eng.png" alt=""></a>
      <a href="#" class="taj" data-lang="es"><img class="img-fluid" src="./img/flag-taj.png" alt=""></a>
      <a href="#" class="rus" data-lang="rs"><img class="img-fluid" src="./img/flag-rus.png" alt=""></a>
</div>

But I don't know how can I change the selected language from flag. Any help?

I am using php and javascript. I want to add the custom language selector with country flag in my website. I write the following code from w3schools tutorial;

<!DOCTYPE html>
<html lang="en-US">

<body>

    <h1>My Web Page</h1>

    <p>Hello everybody!</p>

    <p>Translate this page:</p>

    <div id="google_translate_element"></div>

    <script type="text/javascript">
        function googleTranslateElementInit() {
            new google.translate.TranslateElement({ pageLanguage: 'en' }, 'google_translate_element');
        }
    </script>

    <script type="text/javascript"
        src="//translate.google./translate_a/element.js?cb=googleTranslateElementInit"></script>

    <p>You can translate the content of this page by selecting a language in the select box.</p>

</body>

</html>

Instate of all the language, I am interested on only three languages (Tajik, Russian, English). I put this language flag like this;

<div class="flag">
      <a href="#" class="eng" data-lang="eng"><img class="img-fluid" src="./img/flag-eng.png" alt=""></a>
      <a href="#" class="taj" data-lang="es"><img class="img-fluid" src="./img/flag-taj.png" alt=""></a>
      <a href="#" class="rus" data-lang="rs"><img class="img-fluid" src="./img/flag-rus.png" alt=""></a>
</div>

But I don't know how can I change the selected language from flag. Any help?

Share Improve this question asked Nov 11, 2019 at 4:38 Tek Kshetri 2,3471 gold badge20 silver badges46 bronze badges

Add a ment |

2 Answers 2

Sorted by: Reset to default 2

You can add includedLanguages: "en,es" in your Google translator function to enable only Specific languages.

Example:

function googleTranslateElementInit() {
  new google.translate.TranslateElement({ pageLanguage: 'en',includedLanguages: "en,es" }, 'google_translate_element');
}

includedLanguages - update with required languages.

HTML

<h1>My Web Page</h1>
<p>Hello everybody!</p>
<p>Translate this page:</p>
<div id="google_translate_element"></div>
<script type="text/javascript">
   function googleTranslateElementInit() {
       new google.translate.TranslateElement({ pageLanguage: 'en' }, 'google_translate_element');
   }
</script>
<script type="text/javascript"
   src="//translate.google./translate_a/element.js?cb=googleTranslateElementInit"></script>
<p>You can translate the content of this page by selecting a language in the select box.</p>
<div class="flag">
   <a href="#" class="flag_link eng" data-lang="en">Eng<img class="img-fluid" src="./img/flag-eng.png" alt=""></a>
   <a href="#" class="flag_link taj" data-lang="es">ES<img class="img-fluid" src="./img/flag-taj.png" alt=""></a>
   <a href="#" class="flag_link rus" data-lang="ru">RS<img class="img-fluid" src="./img/flag-rus.png" alt=""></a>
</div>

CSS

#google_translate_element{
  display: none;
}

Javascript

var flags = document.getElementsByClassName('flag_link');


Array.prototype.forEach.call(flags, function(e){
  e.addEventListener('click', function(){
    var lang = e.getAttribute('data-lang'); 
    var languageSelect = document.querySelector("select.goog-te-bo");
    languageSelect.value = lang; 
    languageSelect.dispatchEvent(new Event("change"));
  }); 
});

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

google translate - How can I add language translator with custom flag in my website using javascript? - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)