Блог

Главная - Вопросы по программированию - Google Translate для контента, сгенерированного на Javascript

Google Translate для контента, сгенерированного на Javascript

#javascript #google-translate

#javascript #google-translate

Вопрос:

Есть ли какой-либо способ перевести контент, который генерируется из введенной пользователем формы при использовании Google Translate (используя метод, который я использую ниже)?

Прямо сейчас страница будет переведена, но когда пользователь заполняет и отправляет форму на переведенной странице, ответ, конечно же, возвращается на английском. Это имеет смысл, поскольку перевод выполняется до отправки формы (и выполняется на серверах Google).

Есть ли какой-нибудь относительно простой способ обойти это? Я все еще нащупываю свой путь в javascript, поэтому буду признателен за любую информацию, которую вы можете предоставить. От одной мысли об этом моя крошечная голова взорвалась.

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>

    <script type="text/javascript">

   <!-- Begin CE MP Savings Calc script
    function  doMath3() {
        var one = parseInt(document.theForm3.elements[0].value);
        var two = parseInt(document.theForm3.elements[1].value);
        var three = one * two;
        var z4yearlyCash = three * 4.25 * 12;
        var z3yearlyCash = three * 3.75 * 12;
        var z2yearlyCash = three * 3 * 12;
        var z1yearlyCash = three * 2.5 * 12;
        var baseyearlyCash = three * 1.5 * 12;
        var selection = document.getElementsByName("zone")[0].value;
        var answerCemp = document.getElementById("answerCemp");


    if (document.theForm3.elements[0].value == ""){
    alert("Please enter the number of days a month you commute on Commuter Express.")   
    }

    if (document.theForm3.elements[1].value == ""){
    alert("Please enter the number of times you board a Commuter Express daily.")   
    }   
        if(one > 31){
            alert("Come now, no month has "   one   " days! Please try again.");
        }

        else if(selection == "z4"){
            var prodZ4 = z4yearlyCash - 1680;
        if(prodZ4 > 0){
           answerCemp.innerHTML="<div class='answerbox'><h3>Your Yearly Savings</h3><p>If you pay cash, your yearly expense is $"   z4yearlyCash   ".<br>Commuter Express Zone 4 Monthly Passes cost $1680 per year.<br><strong>Thatamp;#39;s a yearly savings of $"     prodZ4     "!</strong><br><strong><a href='http://store.ladottransit.com/Merchant2/merchant.mvc?Screen=CTGYamp;amp;Store_Code=LTSOamp;amp;Category_Code=MP4'>Buy a Commuter Express Zone 4 Monthly Pass now.</a></strong></p></div>";
            }
        else if(prodZ4 <= 0){
            answerCemp.innerHTML="<div class='answerbox'><h3>Your Results</h3><p>Looks like you don't ride Commuter Express often enough to benefit from purchasing a Monthly Pass. Trip Tickets may be a better option for you. <strong><a href='#triptickets'>Try the Trip Tickets Calculator below.</a></strong></p></div>";
        }
        }

        else if(selection == "z3"){
            var prodZ3 = z3yearlyCash - 1488;
            if(prodZ3 > 0){
            answerCemp.innerHTML="<div class='answerbox'><h3>Your Yearly Savings</h3><p>If you pay cash, your yearly expense is $"   z3yearlyCash   ".<br>Commuter Express Zone 3 Monthly Passes cost $1488 per year.<br><strong>Thatamp;#39;s a yearly savings of $"     prodZ3     "!</strong><br><strong><a href='http://store.ladottransit.com/Merchant2/merchant.mvc?Screen=PRODamp;Store_Code=LTSOamp;Product_Code=LADOTMPZ3amp;Category_Code=MP4'>Buy A Commuter Express Zone 3 Monthly Pass Now</a></strong></p></div>";
            }
            else if(prodZ3 <= 0){
            answerCemp.innerHTML="<div class='answerbox'><h3>Your Results</h3><p>Looks like you don't ride Commuter Express often enough to benefit from purchasing a Monthly Pass. Trip Tickets may be a better option for you. <strong><a href='#triptickets'>Try the Trip Tickets Calculator below.</a></strong></p></div>";
        }
        }

        else if(selection == "z2"){
            var prodZ2 = z2yearlyCash - 1200;
            if(prodZ2 > 0){
            answerCemp.innerHTML="<div class='answerbox'><h3>Your Yearly Savings</h3><p>If you pay cash, your yearly expense is $"   z2yearlyCash   ".<br>Commuter Express Zone 2 Monthly Passes cost $1200 per year.<br><strong>Thatamp;#39;s a a yearly savings of $"     prodZ2     "</strong>!<br><strong><a href='http://store.ladottransit.com/Merchant2/merchant.mvc?Screen=PRODamp;Store_Code=LTSOamp;Product_Code=LADOTMPZ2amp;Category_Code=MP4'>Buy A Commuter Express Zone 2 Monthly Pass Now</a></strong></p></div>";
            }
            else if(prodZ2 <= 0){
            answerCemp.innerHTML="<div class='answerbox'><h3>Your Results</h3><p>Looks like you don't ride Commuter Express often enough to benefit from purchasing a Monthly Pass. Trip Tickets may be a better option for you. <strong><a href='#triptickets'>Try the Trip Tickets Calculator below.</a></strong></p></div>";
        }       
        }

        else if(selection == "z1"){
            var prodZ1 = z1yearlyCash - 960;
            if(prodZ1 > 0){
             answerCemp.innerHTML="<div class='answerbox'><h3>Your Yearly Savings</h3><p>If you pay cash, your yearly expense is $"   z1yearlyCash   ".<Br>Commuter Express Zone 1 Monthly Passes cost $960 per year.<br><strong>Thatamp;#39;s a yearly savings of $"     prodZ1     "</strong>!<br><strong><a href='http://store.ladottransit.com/Merchant2/merchant.mvc?Screen=PRODamp;Store_Code=LTSOamp;Product_Code=LADOTMPZ1amp;Category_Code=MP4'>Buy A Commuter Express Zone 1 Monthly Pass Now</a></strong></p></div>";
            }
            else if(prodZ1 <= 0){
            answerCemp.innerHTML="<div class='answerbox'><h3>Your Results</h3><p>Looks like you don't ride Commuter Express often enough to benefit from purchasing a Monthly Pass. Trip Tickets may be a better option for you. <strong><a href='#triptickets'>Try the Trip Tickets Calculator below.</a></strong></p></div>";
        }
        }

        else if(selection == "Base"){
            var prodBase = baseyearlyCash - 684;
            if(prodBase > 0){
            answerCemp.innerHTML="<div class='answerbox'><h3>Your Yearly Savings</h3><p>If you pay cash, your yearly expense is $"   baseyearlyCash   ".<br>Commuter Express Base Monthly Passes cost $684 per year.<br><strong>Thatamp;#39;s a yearly savings of $"     prodBase     "!</strong><br><strong><a href='http://store.ladottransit.com/Merchant2/merchant.mvc?Screen=PRODamp;Store_Code=LTSOamp;Product_Code=LADOTMPBamp;Category_Code=MP4'>Buy A Commuter Express Base Monthly Pass Now</a></strong></p></div>";
            }
            else if(prodBase <= 0){
            answerCemp.innerHTML="<div class='answerbox'><h3>Your Results</h3><p>Looks like you don't ride Commuter Express often enough to benefit from purchasing a Monthly Pass. Trip Tickets may be a better option for you. <strong><a href='#triptickets'>Try the Trip Tickets Calculator below.</a></strong></p></div>";
        }
        }
    }

    // End CE MP Savings Calc script -->

    </script>

</head>

<body>

<form action="javascript:window.location = 'http://translate.google.com/translate?hl=enamp;amp;sl=enamp;amp;tl='   document.translateform.translate.value   'amp;amp;u='   window.location.href;" method="get" name="translateform">
                    <label for="translate">translate this page</label>
                    <select name="translate" id="translate">
                      <option value="es">Spanish</option>
                      <option value="ar">Arabic</option>
                      <option value="zh-CN">Chinese Simplified</option>
                      <option value="zh-TW">Chinese Traditional</option>
                      <option value="nl">Dutch</option>
                      <option value="fr">French</option>
                      <option value="de">German</option>
                      <option value="el">Greek</option>
                      <option value="it">Italian</option>
                      <option value="ja">Japanese</option>
                      <option value="ko">Korean</option>
                      <option value="pt">Portuguese</option>
                      <option value="ru">Russian</option>
                    </select>
                    <div class="gobuttonwrapper">
                      <input name="submit" type="submit" value="go" class="gobutton">
                    </div>
                  </form>


<div class="calcform">
  <form name="theForm3">
<h2><a name="cemp" id="cemp"></a>You Do the Math: Commuter Express Monthly Pass Vs. Cash</h2>
                        <div class="calcform-content">
                          <div class="formrow-calc">
                            <div class="calcform-col1">
                              <label for="trips-cemp">Daily boardings on Commuter Express Bus*:</label>
                              <input type="text" id="trips-cemp">

                            </div><div class="calcform-col3"></div>
                          </div>
                          <div class="formrow-calc">
                            <div class="calcform-col1">
                              <label for="days-cemp">Days you ride Commuter Express <strong>per month</strong>:</label>

                            <input type="text" id="days-cemp"></div>


                          </div>
                          <div class="formrow-calc">
                            <div class="calcform-col1">
                              <label for="choosezone">Choose Zone:</label>
                              <select name="zone" id="choosezone">
                                <option value="Base">Base</option>
                                <option value="z1">Zone 1</option>
                                <option value="z2">Zone 2</option>
                                <option value="z3">Zone 3</option>
                                <option value="z4">Zone 4</option>
                              </select>

                            </div>
                          </div>
                          <div class="clear"></div>
                          <div align="center">
                            <button type="submit" onclick="doMath3(); return false;" class="btn-submit"><img src="img/btn_savings.png" alt="Show My Yearly Savings"><br>
                            <img src="img/arrow_results.png" alt="your results will display below"></button>
                          </div>


                        </div>
                      </form>
                      <div id="answerCemp"></div>
                    </div>

</body>
</html>

Комментарии:

1. Для всех, кому интересно увидеть это в действии, я собрал немного более простой пример этой проблемы. Выберите в Google Translate неанглийский язык, предоставьте GT делать свое дело и нажмите на ссылку, чтобы добавить больше на страницу на английском.

2. Случайное замечание, которое, вероятно, здесь вас не заинтересует, но полезно знать как новому разработчику JavaScript: следите за parseInt в JS. Чтобы убедиться, что он всегда принимает входные данные за базовое значение 10, передайте параметр radix (например, parseInt(«050») = 40, поскольку при parseInt предполагается восьмеричное число(«050», 10) = 50).

Ответ №1:

Если вы создаете страницу самостоятельно и особенно там, где вы хотите перевести отдельные элементы страницы, вы можете использовать этот плагин. Для заполнения данных перевода вы можете использовать Google Translate, чтобы получить переведенные версии ваших текстовых фраз.

https://github.com/coolbloke1324/jquery-lang-js

Этот плагин сохраняет язык на разных страницах, допускает сопоставление как на основе фраз, так и на основе регулярных выражений, может обрабатывать любое количество языковых опций и позволяет инициировать изменение из события click, как вы описали.

Вы можете увидеть, как он используется в прямом эфире на https://www.orbzu.com (найдите значок флага в верхнем левом углу страницы, а затем выберите новый язык, чтобы текст на странице изменился автоматически).