javascript: different behaviour for the same script

Question

I have some questions about a javascript behaviour (I am learning now javascript from w3schools) and I've seen two examples with a simple code,but I don't understand why the code is behaving different: First example:

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>
<p>My first paragraph.</p>

<script>
document.write(5 + 6);
</script>

</body>
</html>

Second example:

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>
<p>My first paragraph.</p>

<button onclick="document.write(5 + 6)">Try it</button>

</body>
</html>

Why in the second example all document content is replaced with "11" and in the first example "11" as appended to the document? Is there a difference when the script is executed?

Ps: I know that this is not the right place to ask this, but if you know a better book or tutorial to learn javascript, please put it in a comment ( I am a c# backend developer and ex android developer).

In the first example document is being built, in the second one it's built. Btw, it's really very rare cases when you should use document.write ever. — zerkms
– zerkms, Commented Sep 19, 2015 at 9:44
Since you have good background, i guess this could be a better place to learn JS: developer.mozilla.org/en-US/docs/Web/JavaScript... Also, this guy is extraordinary teacher: youtube.com/watch?v=Bv_5Zv5c-Ts (this course is good for absolute beginners, but also, covers some very advanced (and strange) concepts of javascript) — sinisake
– sinisake, Commented Sep 19, 2015 at 9:50

Tyler.z.yang · Accepted Answer · 2015-09-19 10:30:21Z

5

This is because in the 1st example, the browser would not invoke the document.open automatically, but the 2nd one did.

Here is the words from mdn document.write

If the document.write() call is embedded directly in the HTML code, then it will not call document.open().

Basically document.open just clear all the content in your document.

Check these documents about document.write and document.open
mdn document.write
mdn document.open

Thank you buddy! Nice question! Didn't notice this before.

edited Sep 19, 2015 at 10:30

answered Sep 19, 2015 at 9:46

Tyler.z.yang

2,4601 gold badge20 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

sharif2008 · Accepted Answer · 2015-09-19 09:59:09Z

0

You can't use document.write once the document has completed loading. If you do, the browser will open a new document that replaces the current.

Use the innerHTML property to put HTML code inside an element:

 <h1>My First Web Page</h1>
 <p>My first paragraph.</p>
 <span id='r'></span>
 <button id="add"">Try it</button>

JS:

document.getElementById("add").onclick = add;
function add(){
   document.getElementById("r").innerHTML=5+6;
}

http://jsfiddle.net/sharif084/ktx0rmuf/

answered Sep 19, 2015 at 9:59

sharif2008

2,8083 gold badges22 silver badges37 bronze badges

2 Comments

Buda Gavril Over a year ago

I found these examples on w3school but they didn't explained why this script works different and I was curious

sharif2008 Over a year ago

The first one append to the same document on loading and the second one override on the document on user event

Collectives™ on Stack Overflow

javascript: different behaviour for the same script

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related