此任务的目标是使用 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;
};
最佳答案
好的，根据其他答案，我很快就做到了。
还没完成，我不会做。您犯了一些严重的初学者错误，所以我猜您刚刚开始 JS 编程:)
我所做的是修复一些错误(条件、变量...)，并留下了一些 TODO 供您填写。现在输出将按照您的需要显示在目标区域中。但文本未翻译，您需要执行该部分。
这并不复杂，您基本上是逐字翻译，因此您只需执行以下操作:
- 接受输入
- 按空格分割得到字符串数组。
- 根据所选翻译类型逐个翻译每个单词。
- 在文本区域中显示完整翻译的结果。 (您需要将数组转换回字符串)
玩得开心，编程很有趣，但你必须自己做一些事情才能完全理解它们! ;)
<!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>关于javascript - 英语到法语，法语到英语翻译网络应用程序，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33640335/