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

Splitting input one by one and translating input one by one using functions in JS and HTML

本文关键字：输入 拆分 翻译 函数 JS HTML 使用      更新时间：2023-09-26
    <!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，我如何缩小这个差距？任何建议都非常感谢。

您可以通过检查翻译类型并获取要显示的值来将函数包装到一个函数中

，如下所示 
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;
};

尝试将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>

相关文章：