Question

    <!DOCTYPE html>
    <html>

   <head lang="en">
   <meta charset="UTF-8">
   <link rel="stylesheet" href="css/main.css" />
    <script type="application/javascript" src="js/client.js"></script>
   <title>A simple translation app</title>
     </head>

   <body>
   <h1>A simple tranlation app</h1>
 <div>
    <textarea id="sourceText">
   </textarea>
   </div>
   <div>
    <label for="translation">Choose:</label>
    <select id="translation" name="translation">
     <option value="englishToFrench">English to French</option>
     <option value="frenchToEnglish">French to English</option>
     </select>
    </div>
    <div>
    <textarea id="targetText" disabled="disabled"></textarea>
   </div>
      <div>
       <button id="translateBtn" type="button">Translate</button>
            </div>
              <div id="alert">
               </div>

此处的任务是让用户在对象中输入某些英语单词并将其翻译成法语，如下所示，反之亦然，如下所示：

    <script type="text/javascript">
    var englishToFrench = {
    'He': 'il',
    'throws': 'jete',
    'the': 'la',
    'ball': 'balle',
   }

   var frenchToEnglish = {
    'il': 'He',
    'jete': 'throws',
    'la': 'the',
    'balle': 'ball',
  }
var sourceText;

我打算做的是使用两个功能。一个一个地拆分对象输入，另一个是逐个翻译它们。到目前为止，我的工作如下：

    var translateText = function() {
    var translationType = document.getElementById('translation').value;

    if (translationType === 'englishToFrench') {
        console.log('translation used: English to French');
        return 'code1';
    }else if(translationType === 'frenchToEnglish'){
        console.log('translation used: French to English');
        return 'code2';
    }else{
        return "No valid translation selected.";
    }
  };

我的第二个功能是：

        var translateBtnClickHandler = function() {
    var sourceText = document.getElementById('sourceText').value;

    document.getElementById('targetText').value = translateText();

};

window.onload = function() {
    document.getElementById('translateBtn').onclick = translateBtnClickHandler;
};


    </script>
    </body>
    </html>

我的问题是将分割功能与翻译功能联系起来。假设其他一切都很好，使用HTML，我怎么能缩小这个差距呢？任何建议都非常感谢。

Answer 1

您可以通过检查您的翻译类型并将值显示为以下

来将您的函数包装到一个函数中

var englishToFrench = {
    'He': 'il',
    'throws': 'jete',
    'the': 'la',
    'ball': 'balle'
};

var frenchToEnglish = {
    'il': 'He',
    'jete': 'throws',
    'la': 'the',
    'balle': 'ball'
};
var translateBtnClickHandler = function () {
    var dictionary;
    var translationType = document.getElementById('translation').value;

    //get dictionary type
    if (translationType === 'englishToFrench') {
        dictionary = englishToFrench;
    }else if(translationType === 'frenchToEnglish'){
        dictionary = frenchToEnglish;
    }else{
        dictionary = false;
    }

    //if dictionary type is valid, get value from dictionary and display 
    if(dictionary) {
        var sourceText = document.getElementById('sourceText').value;
        var translateText = dictionary[sourceText];
        document.getElementById('targetText').value = undefined ? "" : translateText;
    }

}
window.onload = function() {
    document.getElementById('translateBtn').onclick = translateBtnClickHandler;
};

Answer 2

尝试将sourceText传递给translateText，使用String.prototype.match()，String.prototype.replace()进行匹配，替换第一个textarea元素中的字词

var englishToFrench = {
  'He': 'il',
  'throws': 'jete',
  'the': 'la',
  'ball': 'balle',
}

var frenchToEnglish = {
  'il': 'He',
  'jete': 'throws',
  'la': 'the',
  'balle': 'ball',
}

var translateText = function(src) {

  var translationType = document.getElementById('translation').value;
  // do translation
  var re = new RegExp(src.value.match(/\w+/g).join("|"), "g"),
    translate = function(type) {
      return src.value.replace(re, function(match) {
        return window[type][match] || match
      });
    };

  if (translationType === 'englishToFrench') {
    console.log('translation used: English to French');
    return translate(translationType)
  } else if (translationType === 'frenchToEnglish') {
    console.log('translation used: French to English');
    return translate(translationType)
  } else {
    return "No valid translation selected.";
  }

};

var translateBtnClickHandler = function() {
  var sourceText = document.getElementById('sourceText');

  document.getElementById('targetText').value = translateText(sourceText);

};

window.onload = function() {
  document.getElementById('translateBtn').onclick = translateBtnClickHandler;
};

<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title>A simple translation app</title>
</head>

<body>
  <h1>A simple tranlation app</h1>
  <div>
    <textarea id="sourceText">
    </textarea>
  </div>
  <div>
    <label for="translation">Choose:</label>
    <select id="translation" name="translation">
      <option>select a translation type</option>
      <option value="englishToFrench">English to French</option>
      <option value="frenchToEnglish">French to English</option>
    </select>
  </div>
  <div>
    <textarea id="targetText" disabled="disabled"></textarea>
  </div>

  <button id="translateBtn" type="button">Translate</button>
</body>

</html>

逐个拆分输入并使用JS和HTML中的函数逐个翻译输入

2 个答案: