Javascript Microsoft translator AJAX API，下拉列表以更改languageTo和languageFrom？

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

<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>

翻译
var languageFrom=“en”；
var languageTo=“fr”；
函数translate（）{
document.getElementById（'trans'）.innerHTML=“正在翻译…请稍候”；
var text=document.getElementById（'ori'）。值；
window.mycallback=函数（响应）{
document.getElementById（'trans'）.innerHTML=response；
}
var s=document.createElement（“脚本”）；
s、 src=”http://api.microsofttranslator.com/V2/Ajax.svc/Translate?oncomplete=mycallback&appId=&from=“+languageFrom+”&to=“+languageTo+”&text=“+text；
document.getElementsByTagName（“head”）[0]。appendChild；
}

（从这里开始编写脚本：）

基本上，一旦我填写了APPID，它就会将

ori

文本框中的文本翻译成法语。当然，这一切都很好，但我想做的是：

我希望有两个下拉菜单。一个将用指定的语言填充

languageFrom

变量，另一个下拉菜单将用指定的语言填充

languageTo

变量

我已经在另一个帖子中发布了关于这件事的消息：。这样，当您从下拉菜单中选择一个值时，它将填充变量。我在JSFIDLE上有一个这样的工作示例：

（我包含了我的API密钥，因此更易于操作）

因此，我认为问题在于控制转换的脚本在变量为空时加载，然后在选择下拉选项时不更新

---

我认为这可以通过在单击按钮时调用脚本来解决，而不是在加载页面时。如何做到这一点？微软的支持文档很差，我在那里或谷歌上找不到解决方案。这里有一个指向API文档的链接：

您试图将事件处理程序附加到实际上还不存在的对象（select1和select2）（查看您的JSFIDLE示例）——这会破坏脚本的其余部分，因为您实际上没有附加任何内容

因此，您需要这样做（不是最伟大的约定，但它证明了这一点）

（这意味着您将仅在加载所有内容并使其可用后附加事件）

您还可以使用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>

---

我明白你的意思了。当选择不同的语言时，脚本不需要更新吗？我把它放在JSFIDLE中，我想我可能错过了一些东西：我为您更新了小提琴，似乎100%有效，现在效果很好，谢谢。2个问题。1.）看起来它需要在head部分才能工作，而不是像API示例中的HTML下面？2.）获取翻译文本时，是否会有占位符文本？我想在我的示例链接中有一个例子：

document.getElementById（'trans'）.innerHTML=“Translating…请稍候”1。通常不会，但看起来小提琴应用程序需要它。2.是的，在translate方法中设置document.getElementById（'trans'）。innerHTML将起作用
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);
}