2

我正在尝试为我的网站编写一个翻译框。到目前为止，我已经能够从教程中获得工作代码：

<input id="ori" type="text" />
<button onclick="translate();">Translate</button>
<div id="trans"></div>

<script>
var languageFrom = "en";
var languageTo = "fr";

function translate() {
document.getElementById('trans').innerHTML="Translating... please wait";
var text= document.getElementById('ori').value;
window.mycallback = function(response) {
document.getElementById('trans').innerHTML=response;
}

var s = document.createElement("script");
s.src = "http://api.microsofttranslator.com/V2/Ajax.svc/Translate?oncomplete=mycallback&appId=<MY-APP-ID>&from=" + languageFrom + "&to=" + languageTo + "&text=" + text;
document.getElementsByTagName("head")[0].appendChild(s);
}
</script>

（从这里编写脚本：http ://wizardsoweb.com/microsoftbing-translator-ajax-example/2011/05/?wpmp_switcher=desktop ）

基本上，一旦我填写了我的 APPID，它就会将ori文本框中的文本翻译成法语。当然，这一切都很好，但这是我想要做的：

我希望有两个下拉菜单。一个将languageFrom使用指定的语言填充变量，另一个下拉菜单将languageTo使用指定的语言填充变量。

我已经在另一篇文章中发布了有关此问题的信息：Update script var's with value from drop down? . 这样，当您从下拉菜单中选择一个值时，它会填充该变量。我在 jsFiddle 上有一个工作示例：

http://jsfiddle.net/charlescarver/hk2bJ/1/

（我包含了我的 API 密钥，因此更容易使用）

所以，我认为这个问题是当变量为空时加载控制翻译的脚本，然后在选择下拉选项时不更新。

我认为这可以通过在单击按钮而不是加载页面时调用脚本来解决。如何实现？微软的支持记录很差，我在那里或谷歌上找不到解决方案。这是 API 文档的链接：http: //msdn.microsoft.com/en-us/library/ff512385.aspx

4

1 回答 1

2

您正在尝试将事件处理程序附加到基本上尚不存在的对象（select1 和 select 2）（查看您的 jsfiddle 示例） - 这会破坏脚本的其余部分，因为您实际上没有附加任何内容。

所以你需要做这样的事情（不是最大的约定，但它证明了这一点）

window.onload = function()
{
    document.getElementById("select1").onchange = function() {
        languageFrom = this.value;
    }
    document.getElementById("select2").onchange = function() {
        languageTo = this.value;
    }
}

（这意味着您只会在所有内容都加载并可用后附加事件）

你也可以用你的 html 元素做一些内联的事情，如下所示：

From: <select id="select1" onchange="languageFrom=this.value">
<option value="en">En</option>
<option value="fr">Fr</option>
</select>

To: <select id="select2" onchange="languageTo=this.value">
<option value="en">En</option>
<option value="fr">Fr</option>
</select>

或者或者在你的翻译函数中做所有的事情（这意味着你不需要在你的下拉列表中附加任何东西，也不需要定义任何全局变量）

function translate() {
    document.getElementById('trans').innerHTML="";
    var text= document.getElementById('ori').value;
    window.mycallback = function(response) {
    document.getElementById('trans').innerHTML=response;
    }

    var languageFrom = document.getElementById("select1").value;
    var languageTo = document.getElementById("select2").value;
    var s = document.createElement("script");
    s.src = "http://api.microsofttranslator.com/V2/Ajax.svc/Translate?oncomplete=mycallback&appId=8B841CA7C1A03443682C52AD07B7775A7BD5B3AA&from=" + languageFrom + "&to=" + languageTo + "&text=" + text;
    document.getElementsByTagName("head")[0].appendChild(s);
}
于 2011-11-08T08:58:19.733 回答