How to translate whole page text content in JS with Google Translate-API

I have a web page. It has so many text data. How can i translate all text data with Google Translate-API?

I tried some code and develop but it only changes specific text or it changes whole text in one time and print it one time.

This is the code i tried to develop but i didn't succes.


    <body>
            <p id="textField">You can translate the content of this page by selecting a language in the select box.</p>
            <h1 id="title">My Web Page</h1>
            <p >Hello everybody!</p>
            <p>Translate this page:</p>
            <form>
                <select id="targetLanguage">
                    <option value="ZH">Chinese (Mandarin)</option>
                    <option value="CS">Czech</option>
                    <option value="DA">Danish</option>
                    <option value="NL">Dutch</option>
                    <option value="EN">English</option>
                    <option value="ET">Estonian</option>
                    <option value="TR" selected = "selected">French</option>
                </select>

                <input type="button" id="translateButton" value="Translate" />
            </form>

            <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
            <script type="text/javascript">

                $("#translateButton").click(function () {

                    var url = "https://translation.googleapis.com/language/translate/v2";
                    //Strings requiring translation
                    url += "?q=" + escape($("#textField").text());
                    url += "&q=" + escape($("#title").text());
                    //Target language
                    url += "&target=" + $("#targetLanguage").val();
                    //Replace with your API key
                    url += "&key=AIzaSyBm6-QqyT7_OcJp03BIPZhgfp-xB0GxOb0";
                    console.log(url);
                    $.get(url, function (data, status) {
                        //Results are returned in an array following the order they were passed. 
                        $("#textField").text(data.data.translations[0].translatedText);
                        $("#title").text(data.data.translations[1].translatedText);
                    });       
                });
            </script>  
        </body>

I want to translate the entire page, but the page should not be corrupted. It run like Google-Translate on page.

Solution

I think it may be simpler to use google translate's dropdown menu instead of the form you created. You can then limit the dropdown menu's options to the languages you want to include. To do this you can add included languages to the function, like I did in the code below. I used the languages you had in your original form. If you want to change the languages provided in the dropdown menu just add that language's specific abbreviation to the included languages list.

All the abbreviations for languages with google translate

Once I switched the code to just use the google translate dropdown menu, all the text on the page translated.

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

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

            <h1 id="title">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', includedLanguages: 'zh-CN,cs,da,nl,en,et,fr'}, 'google_translate_element');
            }

            </script>

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


            </body>
            </html>