getElementById() function is not returning expected value in javascript

Question

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

The function is called before `#para2` is defined in the `document`. You can use `load` event of `window` `` — guest271314, Jan 19 '18 at 16:28
`It should return objectHTMLunknwonelement` no. It will always return `null` if the element does not exist - https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById — messerbill, Jan 19 '18 at 16:29
The color highlighting in your post should also show you a big issue.... — epascarello, Jan 19 '18 at 16:30
Note also, `effect` and `effectback` functions are not defined at the code at Question — guest271314, Jan 19 '18 at 16:32

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

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>

edited Jun 20 '20 at 09:12

Community

1
1

answered Jan 19 '18 at 16:36

Ele

33,468
7
37
75

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 – samir imtiaz Jan 19 '18 at 17:33

Alex · Answer 2 · 2018-01-19T16:37:05.847

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.

getElementById() function is not returning expected value in javascript

2 Answers2

Document.write()