Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Document.write clears page

Why in the code below upon the call of document.write in the function validator() the form elements (the checkbox and button) are removed from screen?

<!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>
like image 995
C graphics Avatar asked Jun 03 '12 21:06

C graphics


People also ask

What does document write () function do?

The document. write() method writes a string of text to a document stream opened by document.

What is the difference between document write and written?

write() writes to the document without appending a newline on the end. document. writeln() writes to the document appending a newline at the end.

Is document write deprecated?

No. It's just most often considered bad practice and almost as misused as eval . Read: Why is document. write considered a 'bad practice'?


4 Answers

document.write() is used to write to the document stream.

In your case, the stream is most probably already closed when the onClick handler is called, because your document has finished loading.

Calling document.write() on a closed document stream automatically calls document.open(), which will clear the document.

like image 120
Jerome WAGNER Avatar answered Sep 20 '22 17:09

Jerome WAGNER


A document.write() called after the page loads will overwrite the current document.

You want to set the text of some element within your document. If you add a

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

to the end of your body, then you can call

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

Or with the jQuery library

$("#message").html("your text here");
like image 31
Andy Jones Avatar answered Sep 19 '22 17:09

Andy Jones


Calling document.write after the document has been loaded implicitly calls document.open, which clears the current document. (Compare to calling document.open while the page is loading, which inserts the string into the document stream; it does not clear the document.)

document.write is one of the oldest vestiges of ancient JavaScript, and should generally be avoided. Instead, you probably want to use DOM manipluation methods to update the document.

like image 27
josh3736 Avatar answered Sep 17 '22 17:09

josh3736


you can use

alert("Checkbox is checked");

or if you will be displaying it on page, first create an element with an id "message" (you can write anything you want, but remember, id's have to be unique on the page) like

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

and then use

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

or if you are using jQuery:

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

or if you are using a console enabled browser (Firefox, Chrome etc.)

console.log("Checkbox is checked");

instead of

document.write("Checkbox is checked");
like image 31
Taha Paksu Avatar answered Sep 18 '22 17:09

Taha Paksu