Returning from JavaScript function to HTML Body

Question

I am calling a JavaScript function from the HTML Body using the onload event. The JavaScript function executes successfully but the HTML Body contents are not displayed.

I believe, there is an issue with returning from the JavaScript to the HTML Body.

Here is how the code looks like:

<html>
<script type="text/javascript">
function display()
{
 document.write("You just executed JavaScript code");
 return true;
}
</script>

<body onload="display();">
<p>We are in HTML now</p>
</body>
</html>

This will display the text, "You just executed JavaScript code" in the browser. But the innerHTML of tags is not displayed.

I modified the onload event in tag as:

<body onload="return display();">

And, even this executes only the JavaScript.

Is this only for test ? or you are working on some issue where this require ? — Sunny
– Sunny, Commented Jul 11, 2012 at 5:58
check my answer this is the problem generated by Document.Write().Is this link helpful for you ? — Sunny
– Sunny, Commented Jul 11, 2012 at 6:18
Thank you Sunny and everyone else. Yes, these are helpful and I am reading to understand it better. — Neon Flash
– Neon Flash, Commented Jul 11, 2012 at 8:44

Avinash · Accepted Answer · 2012-07-11 06:15:12Z

4

If you just want to show the message as alert try this.

 <script type="text/javascript">
 function display()
 {
 alert("You just executed JavaScript code");
 return true;
 }
</script>
</head>
 <html>
 <body onload="display();">
 <p>We are in HTML now</p>
</body>

else

 <script type="text/javascript">
 window.onload=function()
 {
document.getElementById("js").innerHTML = "You just executed JavaScript code";
return true;
}
</script>
<body>
<p id="js"></p>
<p>We are in HTML now</p>
</body>
</html>

answered Jul 11, 2012 at 6:15

Avinash

2,0157 gold badges31 silver badges57 bronze badges

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

Comments

market · Accepted Answer · 2012-07-11 06:01:40Z

As per https://developer.mozilla.org/en/document.write

Once the document has finished loading, calling document.write() will actually first call document.open(), which replaces the currently loaded document with a new Document object. So what you're doing with your code is replacing the original document with one that only contains the string 'You just executed javascript code'.

So if you want to use document.write to place text inline, you would have to use it like so:

<html>
<body>
  <p>We are in HTML now</p>
  <script>
    document.write('You just executed javascript code');
  </script>
</body>
</html>

If you want to insert text into the document after it has finished loading, you'll need to use another method, like innerHTML.

kiranvj · Accepted Answer · 2012-07-11 06:08:23Z

1

Document.write is replacing the contents inside your body tag.

Try something like this.

<html>
<script type="text/javascript">
function display()
{
 document.getElementById("text-from-js").innerHTML = "You just executed JavaScript code";
 return true;
}
</script>

<body onload="display();">
<p>We are in HTML now</p>
<p id="text-from-js"></p>
</body>
</html>

answered Jul 11, 2012 at 6:08

kiranvj

34.2k8 gold badges75 silver badges81 bronze badges

Comments

Sujay · Accepted Answer · 2012-07-11 06:15:07Z

1

As the previous answers said. document.write cannot be used for your purpose. And I strongly recommend that you don't use it anywhere. Its a bad practice.

For your purpose prepending/appending to document.body.innerHTML

ex: document.body.innerHTML += 'You just executed javascript code';

or something like

document.body.appendChild(document.createTextNode('You just executed javascript code'))

should do.

answered Jul 11, 2012 at 6:15

Sujay

2,19623 silver badges33 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 11:48:12Z

1

Hi Neon Flash, I have done some work on your problem.I also research about where is the problem then i found some interesting points hope this will help you Check here

or you can use

Usually, instead of doing

document.write
someElement.innerHTML
document.createElement with an someElement.appendChild.

You can also consider using a library like jQuery and using the modification functions in there: http://api.jquery.com/category/manipulation/

edited May 23, 2017 at 11:48

CommunityBot

11 silver badge

answered Jul 11, 2012 at 6:04

Sunny

3,3359 gold badges37 silver badges69 bronze badges

Collectives™ on Stack Overflow

Returning from JavaScript function to HTML Body

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related