13

タグの間に入れられたすべてのテキストを書き込むことになっているJavaScript関数「doAll」があり<p>, </p>ます。私のコードでは、2 つの方法で使用されます。

ページの最後で呼び出すだけで正しく動作します。ただし、クリックボタンイベントが発生したときにもトリガーする必要があります。何らかの理由で、今回は行うべきことを行いません。ボタンを 1 回クリックすると、最初の<p>...</p>html 要素の内部 html が出力されます。

私の質問は、これら 2 つの状況で動作が異なる理由と、この問題を解決するにはどうすればよいかということです。

<!DOCTYPE html>
<html>
    <head>
        <script>
            function returnList(x)
            {
                return document.getElementsByTagName(x);
            }

            function writeList(x)
            {
                var i = 0;

                while (x[i])
                {
                    document.write(x[i++].innerHTML + '<br/>');
                }
            }

            function doAll(x) 
            {
                writeList(returnList(x));
            }
        </script>
    </head>

    <body>
        <p>XXX</p>
        <p>YYY</p>
        <div style = 'background-color: gray;'>
            <p>YYY</p>
            <p>XXX</p>
        </div>

        <button type = 'button' onclick = "doAll('p')">
            Click me!
        </button>

        <script>
            document.write('<br/>');
            doAll('p');
        </script>
    </body>
</html>

「出力」は次のとおりです:
XXX
YYY
YYY
XXX

XXX
YYY
YYY
XXX

ボタンをクリックした後に表示されるのは次のとおりです:
XXX

4

3 に答える 3

14

問題は、ボタンをクリックしたときに、ページが既にレンダリングされていることです。document.write()この時点でトリガーすると、ドキュメント全体が上書きされます。関数をトリガーしたときにまだ存在する唯一の要素であるため、最初の要素を書き込みます。他の要素はdocument.write()、最初に実行された後は存在しません。

関数自体でさえ、ドキュメントの一部ではなくなります。MUST作業している場合、document.write()または単にテストの目的で使用したい場合は、何らかの方法でデータを「キャッシュ」して、すぐに出力する必要があります。

function writeList(x) {
    var i = 0, data = "";

    while (x[i]) {
        data += x[i++].innerHTML + '<br/>';
    }

    document.write(data);
}
于 2013-07-15T13:26:00.507 に答える
2

他の2つの回答で理由が説明されています。これを回避する方法をお勧めします。

HTML をinnerHTML本文 (または別の要素) に追加します。

それ以外の

document.write(x[i++].innerHTML + '<br/>');

使用する

document.getElementsByTagName("body")[0].innerHTML += x[i++].innerHTML + '<br/>';

デモ: http://jsfiddle.net/MNCbx/

于 2013-07-15T13:30:48.910 に答える