-1

Why the javascript program is returing null?It should return objectHTMLunknwonelement

<html> <head> </head> <body> <script type="text/javascript"> function mySignature() { document.write("samir imtiaz<br/>"); document.write("www.fb.com/samir.imtiaz37"); var k=document.getElementById("para2"); alert(k); } <script> mySignature(); </script> <h2> it is head 2</h2> <p id="para1" onmousemove="effect()" onmouseout="effectback()"> this is my first paragraph </p> <p1 id="para2">it is paragraph </p1> <button onclick="mySignature()"> my sign </button> </body> </html>

Expected output while tapping "my sign" button :objectHTMLunknwonelement

Output that i observed:null

<html> <head> </head> <body> <script type="text/javascript"> function mySignature() { var k=document.getElementById("para2"); alert(k); } <script> mySignature(); </script> <h2> it is head 2</h2> <p id="para1" onmousemove="effect()" onmouseout="effectback()"> this is my first paragraph </p> <p1 id="para2">it is paragraph </p1> <button onclick="mySignature()"> my sign </button> </body> </html>

Expected output while tapping "my sign" button :objectHTMLunknwonelement

Output that i observed:objectHTMlunknownelement

Improve this question
6
  • 4
    The function is called before #para2 is defined in the document. You can use load event of window <script> onload = mySignature; </script> Commented Jan 19, 2018 at 16:28
  • It should return objectHTMLunknwonelement no. It will always return null if the element does not exist - developer.mozilla.org/en-US/docs/Web/API/Document/… Commented Jan 19, 2018 at 16:29
  • The color highlighting in your post should also show you a big issue.... Commented Jan 19, 2018 at 16:30
  • please format your markup. Commented Jan 19, 2018 at 16:32
  • Note also, effect and effectback functions are not defined at the code at Question Commented Jan 19, 2018 at 16:32

2 Answers 2

Reset to default
1

Document.write()

Note: as document.write writes to the document stream, calling document.write on a closed (loaded) document automatically calls document.open, which will clear the document.

You're replacing the document DOM before calling document.getElementById, therefore, the element para2 doesn't exist.

function mySignature() { var k = document.getElementById("para2"); alert(k); document.write("samir imtiaz<br/>"); document.write("www.fb.com/samir.imtiaz37"); }
<h2> it is head 2</h2> <p id="para1"> this is my first paragraph </p> <p1 id="para2">it is paragraph </p1> <button onclick="mySignature()"> my sign </button>

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

1 Comment

as document.write writes to the document stream, calling document.write on a closed (loaded) document automatically calls document.open, which will clear the document. please explain these words in details,I am a newbie
0

The first time the alert says null because the element doesn't exist when the code runs. It runs BEFORE the element is created. Once the page is loaded and you click the button the behavior for each example case is:

In the first example, the document.write(.. lines in the method are replacing the dom with the elements you are writing, so the "p1" element is being overwritten and so the getElementById is returning null. Notice how the paragraph disappears after the alert.

In the second example, the object is not being overwritten, however it is an unknown tag type, so the output you observed is expected.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.