1

質問の前に解決策を知りたい方へ：

1 ) 実際に作成される前に getElementById() で要素を読み取らないでください: windows.onload を参照してください。

2) XMLHTTPRequest と AJAX を使用している場合は、コールバック (xhr_object.readyState == 4 リクエストの一部) で getElementById() を呼び出すか、この関数のロックを解除します。

私の場合、目的のコールバックを使用せずにページを呼び出します (noobish Ctrl-C Ctrl-V スタイル)。

質問は次のとおりです。

HTML/Javascript コードで奇妙なケースに直面しています。このコードの目的は、JS 関数を介して HTML 入力 (テキスト型) の値を取得することです。

コンテキストは、メインの HTML ページがすべての JS 関数をロードし、HTTPRequest を介してサブ div の HTML コンテンツをオンデマンドでロードすることです。

選択したコードは、div が読み込まれた後に呼び出されます。

私が読む必要があるPHP生成の入力フィールドは次のとおりです。

    <input id="listejf" type="text" value="6|7|">

これが私のJavaScript呼び出しです:

    listejf=document.getElementById('listejf').value;
    alert(listejf);

このコードは機能しません。Firebug は私に送信します:

TypeError: document.getElementById("listejf") が null です

奇妙なことに、次のようにgetElementByIdスルーを呼び出すと、機能させることができます。alert

    alert(document.getElementById("listejf"));
    listejf=document.getElementById('listejf').value;
    alert(listejf);

最初は がalert表示されますnullが、2 番目は予想どおり「6|7|」と表示されます。

さて、2つの質問：

  • アラートが機能するのはなぜですか?
  • どこにでもアラートをスローせずに機能させるにはどうすればよいですか?

再編集、コードはなくなっていました:

これがメインの HTML ページです: main.html

<head>
    <script type="application/javascript" src="./preload.js"></script>
</head>
<body>
    <a href="#" onCLick="CallPagen()">Link</a>
    <div id="targetid"></div>
</body>

preload.js は次のようになります。

function CallPagen() {
    envoieRequete('./PageN.php', 'targetid');
}

function mytestfunction() {
    listejf = document.getElementById('listejf').value;
    alert(listejf);
}

function envoieRequete(url, id) {
    var xhr_object = null;
    if (window.XMLHttpRequest) xhr_object = new XMLHttpRequest();
    else if (window.ActiveXObject) xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
    xhr_object.open("GET", url, true);
    xhr_object.onreadystatechange = function () {
        if (xhr_object.readyState == 4) {
            if (!document.getElementById(id)) {
                alert("id pas trouvé " + id);
            }
            document.getElementById(id).innerHTML = xhr_object.responseText;
            mytestfunction();
        }
    };
    xhr_object.send(null);
}

PageN.php は、値が入力された状態で inputtext フィールドをエコーするだけです。

4

2 に答える 2

3

「...このように getelement を呼び出すと、動作させることができますalert...」

これは、ほとんどの場合、非同期AJAX 要求を行っていることを意味します。

「アラートが機能するのはなぜですか？」

何が起こるかとalertいうと、応答が返されるのに十分な時間、次のコード行の処理が遅れます。

がない場合alert、コードの次の行がすぐに実行され、要素はまだ使用できません。

「どこにでもアラートをスローせずに機能させるにはどうすればよいですか?」

これは非常に一般的な問題です。解決策は、XMLHttpRequest リクエストの応答に依存するコードを、リクエストへのコールバック内に配置する必要があることです。

したがって、ネイティブ API を介してリクエストを行う場合は、onreadystatechangeコールバックを追加します...

xhrRequest.onreadystatechange = function() {
    if (xhrRequest.readyState === 4) {
        // append the response text to the DOM

        listejf=document.getElementById('listejf').value;
        alert(listejf);
    }
}
于 2012-08-04T16:30:42.063 に答える
1

DOM の準備ができたら、コードを実行する必要があります。alert()が呼び出され、ドキュメントが読み込まれ、ブラウザーが DOM オブジェクトを作成する時間がある場合は、次のことを試してください。

load イベントは、ドキュメントの読み込みプロセスの最後に発生します。この時点で、ドキュメント内のすべてのオブジェクトが DOM にあり、すべての画像とサブフレームの読み込みが完了しています。

window.onload = function() {
    var listejf = document.getElementById('listejf').value;
    alert(listejf);
};
于 2012-08-04T16:18:29.597 に答える