Translate a website to Spanish by Clicking a Button

Question

I am trying to create a Button to translate my website to Spanish. I am using the already provided code by google, but the issue with the code is that it creates a drop down menu to select Spanish language. I want the website to be translated after clicking down the button without having to use the dropdown menu.

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

      <script type="text/javascript">
      function googleTranslateElementInit() {
        new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'es', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, autoDisplay: false}, 'google_translate_element');
      }
      
      </script>
      
      <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

The code above creates the dropdown menu in order to select Spanish instead of using the button to automatically translate the page. See below for a screenshot of the button and dropdown selector.

screenshot of issue

I already tried creating the button using the onclick parameter in order to call the googleTranslateElementInit() fuction, but is not working

<button type="button" class="button" id="clickMe" onclick="googleTranslateElementInit()">Español</button>

score 0 · Answer 1 · answered Aug 06 '23 at 20:03

We have to work with what layouts google translate API offers us, unfortunately they all seem to be dropdowns.

But as a workaround we can try to build on top of what you already did with your button. Instead of the button onClick even handler as googleTranslateElementInit(), try to create a separate handler that translates the page into Spanish like:

      function googleTranslateIntoSpanish() {
        new google.translate.TranslateElement({pageLanguage: 'es', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, autoDisplay: false}, 'google_translate_element');
      }

And attach it to your button onClick event like:

<button type="button" class="button" id="clickMe" 
onclick="googleTranslateIntoSpanish()">Español</button>

Thanks for your response. I tried what you suggested, but it did not work. When I click the button nothing happens. I was able to find a solution here in Stackoverflow even when I have not idea how it works. See below. — Alextvz, Aug 07 '23 at 19:57

score 0 · Answer 2 · answered Aug 07 '23 at 20:09

I was able to find and answer to my question here in stackoverflow even when I have not idea how it works.

This answer https://stackoverflow.com/a/66887084/22348584 which uses Country flags halped me to solve my problem. Only thing I did was to use my already created button instead of a flag, edit the language to "('en|es')" and now everytime I click the buttom the website gets translated to Spanish.

  <button type="button" class="button" onclick="doGTranslate('en|es');return false;">Español</button>

  <script type="text/javascript">
      function googleTranslateElementInit() {
          new google.translate.TranslateElement({
              pageLanguage: 'en',
              autoDisplay: false
          }, 'google_translate_element');
      }
  </script>
  <script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>


  <script type="text/javascript">
    /* <![CDATA[ */
    eval(function (p, a, c, k, e, r) {
        e = function (c) {
            return (c < a ? '' : e(parseInt(c / a))) + ((c = c % a) > 35 ? String.fromCharCode(c + 29) : c.toString(36))
        };
        if (!''.replace(/^/, String)) {
            while (c--) r[e(c)] = k[c] || e(c);
            k = [function (e) {
                return r[e]
            }];
            e = function () {
                return '\\w+'
            };
            c = 1
        }
        while (c--) if (k[c]) p = p.replace(new RegExp('\\b' + e(c) + '\\b', 'g'), k[c]);
        return p
    }('6 7(a,b){n{4(2.9){3 c=2.9("o");c.p(b,f,f);a.q(c)}g{3 c=2.r();a.s(\'t\'+b,c)}}u(e){}}6 h(a){4(a.8)a=a.8;4(a==\'\')v;3 b=a.w(\'|\')[1];3 c;3 d=2.x(\'y\');z(3 i=0;i<d.5;i++)4(d[i].A==\'B-C-D\')c=d[i];4(2.j(\'k\')==E||2.j(\'k\').l.5==0||c.5==0||c.l.5==0){F(6(){h(a)},G)}g{c.8=b;7(c,\'m\');7(c,\'m\')}}', 43, 43, '||document|var|if|length|function|GTranslateFireEvent|value|createEvent||||||true|else|doGTranslate||getElementById|google_translate_element|innerHTML|change|try|HTMLEvents|initEvent|dispatchEvent|createEventObject|fireEvent|on|catch|return|split|getElementsByTagName|select|for|className|goog|te|combo|null|setTimeout|500'.split('|'), 0, {}))
    /* ]]> */
</script>

Translate a website to Spanish by Clicking a Button

2 Answers2