Question

此任务的目标是使用JavaScript，HTML和CSS编写翻译Web应用程序。目的是将以下短语从英语切换到法语，反之亦然。我已经声明了两个名为 englishToFrench 和 frenchToEnglish 的对象，以及一个名为sourceText的全局变量，在下面的函数中使用。第一个函数应该将英语转换为法语，反之亦然。第二个功能是将用户点击的任何内容带到文本框中。但是这不会执行，我不明白为什么。任何意见是极大的赞赏。

    <!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 tranlation 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="engToFrench">English to French</option>
        <option value="frenchToEng">French to English</option>
    </select>
</div>
<div>
    <textarea id="targetText" disabled="disabled"></textarea>
</div>
<div>
    <button id="translateBtn" type="button">Translate</button>
</div>
</body>
</html>



var englishToFrench = {
        'He': 'il',
        'throws': 'jete',
        'the': 'la',
        'ball': 'balle',
        'I': 'je',
        'ride': 'monte',
        'my': 'mon',
        'bicycle': 'velo',
        'to': 'au',
        'work': 'travail',
        'Peter': 'Pierre',
        'likes': 'aime',
        'computer': 'programmation',
        'programming': 'informatique',
        'John': 'Jean',
        'plays': 'joue',
        'hockey': 'au hockey',
        'She': 'elle',
        'eats': 'mange',
        'a lot': 'beaucoup',
        'of': 'de',
        'chicken': 'poulet',

    }
    var frenchToEnglish = {
        'il': 'He',
        'jete': 'throws',
        'la': 'the',
        'balle': 'ball',
        'je': 'I',
        'monte': 'ride',
        'mon': 'my',
        'velo': 'bicycle',
        'au': 'to',
        'travail': 'work',
        'Pierre': 'Peter',
        'aime': 'likes',
        'programmation': 'computer',
        'informatique': 'programming',
        'Jean': 'John',
        'joue': 'plays',
        'au hockey': 'hockey',
        'elle': 'She',
        'mange': 'eats',
        'beaucoup': 'a lot',
        'de': 'of',
        'poulet': 'chicken',


    }

}

var sourceText;

var translateText = function (response){
    if(sourceText === englishToFrench || sourceText === frenchToEnglish){
        document.getElementById('translation').value;


    }
}


var translateBtnClickHandler = function() {
var sourceText = document.getElementById('sourceText').value;
var translation = document.getElementById('translation').value;
alert('translate was clicked; src text: ' + sourceText + ' translation: ' + translation);

    };

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

Answer 1

您的Javascript不在<script></script>内。你也有一个多余的花括号。

下次您可以在浏览器中打开developer tools以查找这些语法错误（请参见屏幕截图）。

以下是您的固定代码：

＆＃13;

<!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 tranlation 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="engToFrench">English to French</option>
      <option value="frenchToEng">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',
      'I': 'je',
      'ride': 'monte',
      'my': 'mon',
      'bicycle': 'velo',
      'to': 'au',
      'work': 'travail',
      'Peter': 'Pierre',
      'likes': 'aime',
      'computer': 'programmation',
      'programming': 'informatique',
      'John': 'Jean',
      'plays': 'joue',
      'hockey': 'au hockey',
      'She': 'elle',
      'eats': 'mange',
      'a lot': 'beaucoup',
      'of': 'de',
      'chicken': 'poulet',

    }
    var frenchToEnglish = {
      'il': 'He',
      'jete': 'throws',
      'la': 'the',
      'balle': 'ball',
      'je': 'I',
      'monte': 'ride',
      'mon': 'my',
      'velo': 'bicycle',
      'au': 'to',
      'travail': 'work',
      'Pierre': 'Peter',
      'aime': 'likes',
      'programmation': 'computer',
      'informatique': 'programming',
      'Jean': 'John',
      'joue': 'plays',
      'au hockey': 'hockey',
      'elle': 'She',
      'mange': 'eats',
      'beaucoup': 'a lot',
      'de': 'of',
      'poulet': 'chicken',


    }


    var sourceText;

    var translateText = function(response) {
      if (sourceText === englishToFrench || sourceText === frenchToEnglish) {
        document.getElementById('translation').value;


      }
    }


    var translateBtnClickHandler = function() {
      var sourceText = document.getElementById('sourceText').value;
      var translation = document.getElementById('translation').value;
      document.getElementById('alert').innerHTML = 'translate was clicked; src text: ' + sourceText + ' translation: ' + translation;

    };

    window.onload = function() {
      document.getElementById('translateBtn').onclick = translateBtnClickHandler;
    };
  </script>



</body>

</html>

＆＃13;

Answer 2

好的，基于另一个答案，我已经做了这个快速的事情。

它尚未完成，我不会这样做。你犯了一些严重的初学者错误，所以我猜你刚刚开始使用JS编程：）

我所做的是修复一些错误（条件，变量......），我留下了一些TODO让你填补。现在输出显示在目标区域中。但是文本没有被翻译，你需要做那个部分。

它不是很复杂，你基本上是逐字翻译的，所以你只需要做以下事情：

输入
按空格拆分以获取字符串数组。
根据所选的翻译类型逐个翻译每个单词。
在textarea中显示完全翻译的结果。（您需要将数组转换回字符串）

玩得开心，编程很有趣，但你可以自己做一些事情来完全理解它们！ ;）

＆＃13;

<!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 tranlation 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',
            'I': 'je',
            'ride': 'monte',
            'my': 'mon',
            'bicycle': 'velo',
            'to': 'au',
            'work': 'travail',
            'Peter': 'Pierre',
            'likes': 'aime',
            'computer': 'programmation',
            'programming': 'informatique',
            'John': 'Jean',
            'plays': 'joue',
            'hockey': 'au hockey',
            'She': 'elle',
            'eats': 'mange',
            'a lot': 'beaucoup',
            'of': 'de',
            'chicken': 'poulet',

        };
        var frenchToEnglish = {
            'il': 'He',
            'jete': 'throws',
            'la': 'the',
            'balle': 'ball',
            'je': 'I',
            'monte': 'ride',
            'mon': 'my',
            'velo': 'bicycle',
            'au': 'to',
            'travail': 'work',
            'Pierre': 'Peter',
            'aime': 'likes',
            'programmation': 'computer',
            'informatique': 'programming',
            'Jean': 'John',
            'joue': 'plays',
            'au hockey': 'hockey',
            'elle': 'She',
            'mange': 'eats',
            'beaucoup': 'a lot',
            'de': 'of',
            'poulet': 'chicken',

        };

        var translateText = function() {
            var translationType = document.getElementById('translation').value;

            if (translationType === 'englishToFrench') {
                console.log('translation used: English to French');
                // TODO You need to translate the input, the best is to write a function that does the work. It should split the whole input by spaces to get all the words one by one and translate them one by one. But that's for you to do ;) Have fun!
                return 'TODO see your code (1)';
            }else if(translationType === 'frenchToEnglish'){
                console.log('translation used: French to English');
                return 'TODO see your code (2)';
            }else{
                return "No valid translation selected.";
            }
        };


        var translateBtnClickHandler = function() {
            var sourceText = document.getElementById('sourceText').value;

            // Copy the translation in the target area.
            document.getElementById('targetText').value = translateText();

        };

        window.onload = function() {
            document.getElementById('translateBtn').onclick = translateBtnClickHandler;
        };
    </script>
</body>
</html>

＆＃13;

英语到法语，法语到英语翻译网络应用程序

2 个答案: