19

以下のコードdocument.writeで、関数を呼び出すとvalidator()、フォーム要素(チェックボックスとボタン)が画面から削除されるのはなぜですか?

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript">
            function validator() {
                if (document.myForm.thebox.checked)
                    document.write("checkBox is checked");
                else 
                    document.write("checkBox is NOT checked");
            }
        </script>
    </head>
    <body>
        <form name="myForm">
            <input type="checkbox" name ="thebox"/>
            <input type="button" onClick="validator()" name="validation" value="Press me for validation"/>
        </form>
    </body>
</html>
4

6 に答える 6

62

document.write()ドキュメントストリームへの書き込みに使用されます。

あなたの場合、ドキュメントの読み込みが完了しているため、onClickハンドラーが呼び出されたときにストリームがすでに閉じられている可能性があります。

document.write()閉じたドキュメントストリームを呼び出すと、が自動的に呼び出され、document.open()ドキュメントがクリアされます。

于 2012-06-03T21:12:09.447 に答える
14

ページのdocument.write()読み込み後に呼び出されると、現在のドキュメントが上書きされます。

ドキュメント内のある要素のテキストを設定したいとします。追加する場合

<p id="message"></p>

あなたの体の終わりまで、あなたは呼び出すことができます

document.getElementById("message").innerHTML = "your text here";

またはjQueryライブラリを使用

$("#message").html("your text here");
于 2012-06-03T21:12:34.080 に答える
12

ドキュメントがロードされたdocument.write に呼び出すとdocument.open、暗黙的にが呼び出され、現在のドキュメントがクリアされます。(ページの読み込み中に呼び出すことと比較しdocument.openてください。これにより、文字列がドキュメントストリームに挿入され、ドキュメントはクリアされません。)

document.writeは古代JavaScriptの最も古い痕跡の1つであり、通常は避ける必要があります。代わりに、DOM操作メソッドを使用してドキュメントを更新することをお勧めします。

于 2012-06-03T21:13:39.230 に答える
3

あなたが使用することができます

alert("Checkbox is checked");

または、ページに表示する場合は、最初に「メッセージ」というIDを持つ要素を作成します(好きなものを書くことができますが、IDはページ上で一意である必要があります)。

<div id="message"></div>

その後、

document.getElementById("message").innerHTML = "Checkbox is checked";

または、jQueryを使用している場合:

$("#message").html("Checkbox is checked");

または、コンソール対応のブラウザ(Firefox、Chromeなど)を使用している場合

console.log("Checkbox is checked");

それ以外の

document.write("Checkbox is checked");
于 2012-06-03T21:23:33.227 に答える
1
        var x = document.createElement("div")
        document.body.appendChild(x)
于 2016-10-15T13:55:49.733 に答える
0

document.writeDOM操作が発生している、またはすでに発生してdocument.write()いる場合は、元のドキュメントを変更しますが、DOMツリーへの変更を無視するため、うまく機能しません。

また、ブラウザは元のドキュメントからではなく、主にDOMからのものを表示することを忘れないでください。

于 2012-06-03T21:10:33.210 に答える