单击按钮将网站翻译成西班牙语

Question

我正在尝试创建一个按钮将我的网站翻译成西班牙语。我正在使用谷歌已经提供的代码，但该代码的问题是它创建了一个下拉菜单来选择西班牙语。我希望在单击按钮后翻译网站，而无需使用下拉菜单。

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

上面的代码创建下拉菜单，以便选择西班牙语，而不是使用按钮自动翻译页面。请参阅下面的按钮和下拉选择器的屏幕截图。

我已经尝试使用 onclick 参数创建按钮以调用

googleTranslateElementInit()

功能，但不起作用

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

Answer 1

我们必须使用谷歌翻译 API 为我们提供的布局，不幸的是它们似乎都是下拉菜单。

但作为一种解决方法，我们可以尝试在您已经使用按钮所做的事情的基础上进行构建。尝试创建一个单独的处理程序，将页面翻译成西班牙语，而不是像 googleTranslateElementInit() 这样的按钮 onClick 甚至处理程序：

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

并将其附加到您的按钮 onClick 事件，例如：

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