Question 225261 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Translate a website to Spanish by Clicking a Button

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>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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>

  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search