0

次のコードがあります。

...<some code>...
...<elements load>...

<script type="text/javascript">

    var selected_city = document.getElementById('jform_city').value;
    var selected_province=document.getElementById('jform_province').value;

    <!-- set the onchange property for all options in provice to activate getCities() -->
    document.getElementById('jform_province').onchange = function() {
        getCities();
    }

    if(selected_province != ''){
        getCities();
    }
</script>

...<more elements load>....

<script type="text/javascript">
    alert("TEST");
    document.getElementById(selected_city).selected="1";
    </script>

私が持っているドロップダウンリストからオプションを選択します。問題は、アラートを削除すると("")、何らかの理由で機能しなくなることです。何かアイデアはありますか?

4

1 に答える 1

4

を使用する前に、ドキュメントが読み込まれるまで待つ必要がありますdocument.getElementById。アラートによって処理が遅くなり、アラート ボックスの背後で要素が読み込まれます。アラートがないと、次の行が実行されるときに「selected_city」の要素がない可能性があります。

ページが読み込まれるまでの待機について詳しくは、この StackOverflow の質問をご覧ください。

編集

まず第一に、Web ブラウザーがページを解析するときに、受け取った HTML 要素を DOM (ページのメモリ内表現であるドキュメント オブジェクト モデル) に変換します。要素が DOM に配置された後でのみ、要素を操作することができます。また、要素が HTML に表示される順序と同じ順序で DOM に入力されるとは限りません。最新の高速ブラウザーは非常に非同期で実行され、ページは最終的に次のようになります全体が同期的にロードされました。これは簡単に確認できます。ほぼすべてのブラウザがテキストをロードし、画像の取得中にテキストを表示します。画像がフェッチされた後にのみ、それをディスプレイに挿入し、必要に応じてテキストを押し込んだりリフローしたりします。最終結果は同じですが、ページはこの方法ではるかに高速にロードされるように見えます.

残念ながら、この「待機」保証は Javascript には適用されません (JS 自体がページの読み込み方法を変更できるため)。したがって、単にスクリプト タグをドキュメントの末尾に移動することは、DOM に要素が含まれるのを待つことと同じではありません。

実際には、ブラウザがコールバックして DOM がロードされたことを知らせるまで待つ必要があります。これが、DOM を操作できることを本当に知る唯一の方法です。これがwindow.onload、このコールバックの目的です。これが機能しない理由はいくつか考えられます。

実際に verbatimwindow.onload = function();をプラグインしただけでは、ポイントを逃しました。これは、空の関数ではなく、自分の関数であることを意味します。入力しただけではないと思いますが、念のため、コードは次のようにする必要があります

window.onload = function(){
    document.getElementById(selected_city).selected="1";
};

または、window.onload=[some function]後で呼び出す関数を 1 つの変数に割り当てるため、変数は 1 つしか存在できません。も割り当てる他のスクリプトをロードしている場合window.onload、コールバックが失われる可能性があります。

これが、任意の数の関数を受け入れてコールバックできる準備が整った関数を備えた jquery などのフレームワークが、フロントエンド開発者の宝である理由です。これは、onload の使用について特に尋ねるStackOverflow の別の質問です。

最後に、この行：

var selected_city = document.getElementById('jform_city').value;

また、正しく実行する前に DOM をロードする必要があります。selected_city#jform_city の値を要求するときにロードされないため、それ自体が null または未定義である可能性があります。これにより、document.getElementById(selected_city)選択しようとしたときにその要素がロードされていたとしても、失敗します。

非同期性は Javascript の大きな問題です。

経験則として、ページ自体から情報を取得する必要があるときはいつでも、DOM がロードされるまで待つ必要があります。実際には、これは、ほとんどすべてのコード (ページをロードする必要がないものを除く) が、ページがロードされた後に呼び出される関数内にある必要があることを意味します。

于 2013-02-13T20:39:37.140 に答える