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テキストボックスのテキストがフランス語に翻訳されます。もちろん、これはすべて正常に機能しますが、これが私がやろうとしていることです。

2つのドロップダウンメニューが必要です。1つはlanguageFrom変数に指定された言語を入力し、もう1つは変数に指定された言語を入力するドロップダウンメニューlanguageToです。

私はすでにこの問題について別の投稿で投稿しています：ドロップダウンからの値でスクリプト変数を更新しますか？。このように、ドロップダウンメニューから値を選択すると、変数に値が入力されます。私はjsFiddleでこれの実用的な例を持っています：

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

（APIキーを含めたので、作業が簡単です）

つまり、これに伴う問題は、変数が空のときに翻訳を制御するスクリプトが読み込まれ、ドロップダウンオプションが選択されたときに更新されないことだと思います。

これは、ページが読み込まれたときではなく、ボタンがクリックされたときにスクリプトを呼び出すことで修正できると思います。これはどのように達成できますか？Microsoftのサポートは十分に文書化されておらず、そこでまたはgoogleで解決策を見つけることができません。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 に答える