我正在为我的网站写一个翻译框。到目前为止,我已经能够从教程中获得工作代码:
<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密钥,因此更容易处理)
SO ,我认为这个问题是当变量为空时加载控制转换的脚本,然后在选择下拉选项时不会更新。
我认为这可以通过在单击按钮时调用脚本来修复,而不是在加载页面时修复。如何实现这一目标?微软的支持记录很少,我无法在谷歌或谷歌找到解决方案。以下是API文档的链接:http://msdn.microsoft.com/en-us/library/ff512385.aspx
答案 0 :(得分:2)
您正在尝试将事件处理程序附加到对象(select1&amp; 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);
}