0

今日、学校で Javascript の基礎を習ったところですが、困っている問題があります。

演習では、テキスト ボックス (数字 x を入力する必要があります) とボタンを含む html ページを作成します。ボタンをクリックすると、'document.write ' 関数。

私はこれをうまく行うことができますが、問題は、この関数を繰り返し使用できるようにする必要があることです。たとえば、テキストボックスの数字を変更してボタンをもう一度クリックすると、新しい三角形が作成され、以前の内容がも保存しました。

これを実現するには document.write のみを使用する必要がありますが、document.write を使用すると以前のコンテンツがすべて削除されるため、新しく作成されたページでは「ヘッド」のスクリプトは存在しません。



これが私のコードです。

4

2 に答える 2

1

body 要素の HTML を取得し、この HTML に新しいパターンを追加してドキュメントに書き込みます。

var bodyHtml = document.body.innerHTML;
var newHtml = "";
//create new pattern and save in newHtml variable

Document.write(bodyHtml + < br /> + newHtml);
于 2013-10-28T18:06:08.067 に答える
1

document.write( MDN ドキュメント) は、ドキュメントの先頭にある script タグのようなコンテキストから呼び出されると、事前にdocument.open( MDN ドキュメント) を呼び出します。これにより、ドキュメントが再初期化され、以前のコンテンツが上書きされます。ただし、またはを明示的に呼び出していない場合、後続の の呼び出しでは、以前に書き込まれたコンテンツは上書きされませんdocument.write 。document.opendocument.close

以前にドキュメントに書き込んだ内容を変数に保存し、事前に呼び出すことができますdocument.open。次のようなもの：

    var ShowOnPage = '<input type="text" id="text1" />' + '<input type="button" value="Click Me" onClick="CreateTriangle()" /> <br/>';
    function CreateTriangle() {
        var x = parseInt(document.getElementById("text1").value);
        for (i = 1; i <= x; i++) {
            for (j = 1; j <= i; j++) {
                ShowOnPage += "*";
            }
            ShowOnPage += "<br/>"
        }
        document.open();
        document.write(ShowOnPage);
        document.close();
    }

は三角形を作成する関数の外部ShowOnPageで作成され、クリック間で保持する入力の値で初期化されることに注意してください。また、呼び出しの使用とその周辺にも注意してください。document.opendocument.closedocument.write

補足として、なぜdocument.writeここで必要なのですか？これは、このようなものを実装する方法ではなくdocument.write、実際の状況ではほとんど使用されないようなものの使用法を教えても、Web 開発の知識が増えることにはなりません。

この fiddle のようにinnerHTML、特定の要素のコンテンツを導入しgetElementByIdて調整することで、同じ概念を理解できます。

于 2013-10-28T18:09:15.683 に答える