Returning from JavaScript function to HTML Body - javascript

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.

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>

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.

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>

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.

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/

Related

How to execute a script by call his id

from the html below I would like to execute a script by calling his id. So that when the script id is called the display fonction execute. Any other suggestion will be appreciate as long that the script only execute when the id is called. Thank you
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
//Here is where I would like to execute the script by calling his id.
//Any other suggestion to make it work will be appreciate
});
</script>
<script type="text/javascript" id="execute">
$(document).ready(function(){
display();
});
</script>
<!--------------------- Footer -------------------------------->
<script>
function display(){
$("#show").css("display", "block");
}
</script>
<p id="show" style="display:none">This is a paragraph with little content.</p>
</body>
</html>
That's not how JavaScript works.
Once you include a <script> in DOM, it's executed. However, the script itself can define functions, which could be named and called at a later point (by their name), by any other script or element in the page, as long as they have access to the context in which you defined your function.
Example:
<script>
function myFunction() {
window.alert('I got called!');
}
</script>
<button onclick="myFunction()">Execute myFunction()</button>
So instead of using the id of the script, I'm using the name of the function.
To fully answer your question: running a script by id is not possible because all scripts are executed as soon as they are parsed by the browser (which happens in their chronological order in DOM) and there is no way of re-running them after they have already been executed.
Obviously, one could argue that you could remove the <script> tag altogether, create a new one with the same contents, which is going to be rerun when added to DOM. But, at least in theory, it's not rerunning the same <script>, it's running a different one. Another instance/<script> tag.
Needless to say, nobody does that as it's much more convoluted than to simply define a function and call that function at a later time.
Thank you for your explanation on the DOM. It help me figure out another alternative
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
var result = window.prompt("Would you like the footer to be display?");
if(result == "yes"){
bodyPage1();
}
});
</script>
<script>
function bodyPage1(){
display();
}
</script>
<!--------------------- Footer -------------------------------->
<script>
function display(){
$("#show").css("display", "block");
}
</script>
<p id="show" style="display:none">This is a paragraph with little content.</p>
</body>
</html>

How to change html content, when the page has fully loaded

So, I have this HTML document
<!DOCTYPE html>
<html>
<head>
<title>TestPage</title>
<script src="script.js"></script>
</head>
<body>
<p id="test">Sample text</p>
</body>
</html>
With this JS file
window.addEventListener("load", MyFunction());
function MyFunction(){
document.getElementById("test").innerHTML = "it worked";
}
and ofcourse this doesn't work (the text isn't changed), since it loads the script before it actually loads the <p id="test"></p> element (I think). It may seem strange, but I want to change the content of some elements, after everything has loaded. I have searched, but to no avail. I'm missing something obvious here probably, but I can't seem to figure it out. Any advice would be appreciated!
You're calling the function in the setup for your "load" event.
Did you mean:
window.addEventListener("load", MyFunction);
??
Try:
window.onload = function () {
MyFunction()
}
function MyFunction(){
document.getElementById("test").innerHTML = "it worked";
}
Source: Execute Javascript When Page Has Fully Loaded
Simply add this to your body tag :
<body onload=myFunction()>
function myFunction(){
document.getElementById("test").innerHTML = "it worked";
}

javascript code not work in HEAD tag

My webpage has the following code:
<html>
<head>
<title>This is test Page</title>
<script language="javascript" type="text/javascript">
document.getElementById("msg1").innerHTML = document.URL.toString();
</script>
</head>
<body>
<div class="sss">
<p id="msg1"></p>
</div>
</body>
</html>
As you now at the time the script executes the div doesn't exist but I want to put my JavaScript code only In the <head> tag and I won't put it in middle of HTML code.
But this code only works when I put the <script> tag after the <div> tag.
I use VS2010 and firefox 19.0.1
Is there anyway to put code in <head> tag?
Your script relies on the DOM being ready, so you need to execute that function call only after the DOM is ready.
<script language="javascript" type="text/javascript">
window.onload = function() {
document.getElementById("msg1").innerHTML = document.URL.toString();
}
</script>
The various tags in your HTML page are loaded and processed in the order in which they appear on the page. Your <script> tag is executed immediately when it is parsed in the <head>. This is before the <body> and the elements inside the <body> are parsed. So, the script tries to reference an element that is not defined at the time it is executed.
Michael Geary is right, in order to execute your code, I'd use jQuery library (a de-facto standard in JS development) and utilize the DOM ready event. This will ensure the code in the handler will execute once DOM is fully loaded.
<script>
$(function(){
$('#msg1').html(document.URL.toString());
});
</script>
I recommend to to use addEventListener like this:
<script language="javascript" type="text/javascript">
document.addEventListener("DOMContentLoaded",() => {
document.getElementById("msg1").innerHTML = document.URL.toString();
});
</script>
Your script uses dom element and must run after the dom loaded.
Wrap your code in a function and call it after dom loaded
function myfunc(){
//code here
}
window.onload = myfunc();

How to call a JavaScript function, declared in <head>, in the body when I want to call it

I have a working JavaScript function declared in the head of an HTML page. I know how to create a button and call the function when the user clicks the button. I want to call it myself some where on the page:
myfunction();
How do I do it?
You can call it like that:
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">
var person = { name: 'Joe Blow' };
function myfunction() {
document.write(person.name);
}
</script>
</head>
<body>
<script type="text/javascript">
myfunction();
</script>
</body>
</html>
The result should be page with the only content: Joe Blow
Look here: http://jsfiddle.net/HWreP/
Best regards!
I'm not sure what you mean by "myself".
Any JavaScript function can be called by an event, but you must have some sort of event to trigger it.
e.g. On page load:
<body onload="myfunction();">
Or on mouseover:
<table onmouseover="myfunction();">
As a result the first question is, "What do you want to do to cause the function to execute?"
After you determine that it will be much easier to give you a direct answer.
Just drop
<script>
myfunction();
</script>
in the body where you want it to be called, understanding that when the page loads and the browser reaches that point, that's when the call will occur.
You can also put the JavaScript code in script tags, rather than a separate function. <script>//JS Code</script> This way the code will get executes on Page Load.

javascript tag trigger - code position on page

i use that tag to alert me when a tag has been shows up
<html>
<head>
</head>
<body>
<script type="text/javascript">
document.getElementsByTagName('iframe')[0].onload = function() {
alert('loaded');
}
</script>
<iframe></iframe>
</body>
</html>
strange , since this code working :
<html>
<head>
</head>
<body>
<iframe></iframe>
<script type="text/javascript">
document.getElementsByTagName('iframe')[0].onload = function() {
alert('loaded');
}
</script>
</body>
</html>
why the Js need to under the tag to work?
what's the problem here?
Because the code in a script tag is executed immediately. And in the first example the iframe doesn't exist at that time. But what you can do is to wrap you code into an onload (for the main page) event. E.g.:
window.onload = function() {
//your code
}
Then it doesn't matter where the code is placed.
Iframe tag does not exist at the moment you are trying to access it.
You may check that by simply alerting array length, like
alert(document.getElementsByTagName('iframe'));
Have you thought about executing your javascript after the page is loaded? You may use some frameworks like jQuery to facilitate crossbrowser issues. Or just put all your javascript code to the very bottom of body.

Categories