Could you please explain the distinctions among onLoad, onDomready, No wrap - in <head>, and No wrap - in <body>?

Question

Could you please explain the distinctions among onLoad, onDomready, No wrap - in <head>, and No wrap - in <body>?

When it comes to editing my code, I rely on JSFiddle. However, I have noticed that in certain instances when running JavaScript or jQuery, the code only works if I choose "No wrap - <head>" or "No wrap - <body>".

CLICK HERE FOR THE JSFIDDLE EXAMPLE

If you check out the fiddle linked above, you'll see that clicking the <button> element won't trigger an alert() unless you have selected either "No wrap - <head>" or "No wrap - <body>".

I am naturally curious and always eager to understand how things function. Could someone explain what exactly this option changes and why it's necessary to make this change?

javascript jsfiddle

Answer 1

Answer №1

Executing on Page Load:

To ensure the code runs during the window's onLoad event, wrap it accordingly. This event triggers after the entire page, including images, has finished loading.

Executing on DOM Ready:

To execute the code when the DOM is ready, wrap it to be triggered by the onDomReady event. This event occurs once the DOM has been constructed and is accessible for manipulation.

No Wrap - Inside the <head>:

If you choose this option, your JavaScript code will be placed within the <head> section of the HTML document.

No Wrap - Inside the <body>:

Selecting this alternative places your JavaScript code within the <body> section of the HTML document.

Please take note that additional details are available in jsFiddle's documentation.

Answer 2

Executing on Page Load:

To ensure the code runs during the window's onLoad event, wrap it accordingly. This event triggers after the entire page, including images, has finished loading.

Executing on DOM Ready:

To execute the code when the DOM is ready, wrap it to be triggered by the onDomReady event. This event occurs once the DOM has been constructed and is accessible for manipulation.

No Wrap - Inside the <head>:

If you choose this option, your JavaScript code will be placed within the <head> section of the HTML document.

No Wrap - Inside the <body>:

Selecting this alternative places your JavaScript code within the <body> section of the HTML document.

Please take note that additional details are available in jsFiddle's documentation.

Answer 3

Answer №2

By using the onLoad and onDomready functions, your JavaScript code will run when the document has finished loading or when the DOM is ready. It's similar to writing your code like this:

Reference from Stackoverflow

<script type="text/javascript">
    //<![CDATA[
      window.onload=function(){ /* your js here */ }
   //]]>
</script>

If you choose the no wrap options, it means that you have added your script tag to either the head or body tags of the document in the way you are probably accustomed to doing.

<html>
 <head>
       <title>Stuff</title>
 <script>
   /* your code */
 </script>
 </head>

Answer 4

By using the onLoad and onDomready functions, your JavaScript code will run when the document has finished loading or when the DOM is ready. It's similar to writing your code like this:

Reference from Stackoverflow

<script type="text/javascript">
    //<![CDATA[
      window.onload=function(){ /* your js here */ }
   //]]>
</script>

If you choose the no wrap options, it means that you have added your script tag to either the head or body tags of the document in the way you are probably accustomed to doing.

<html>
 <head>
       <title>Stuff</title>
 <script>
   /* your code */
 </script>
 </head>

Answer 5

Answer №3

When onload is triggered, it indicates that all resources on the page have been fully loaded, including images, CSS, and JavaScript. On the other hand, domReady simply means that the DOM tree has finished constructing.

Answer 6

When onload is triggered, it indicates that all resources on the page have been fully loaded, including images, CSS, and JavaScript. On the other hand, domReady simply means that the DOM tree has finished constructing.

Answer 7

Answer №4

When all content has finished loading, the load event serves as a general signal for completion. Various elements are able to support this, such as external SCRIPT and IMG, IFRAME which trigger the event upon completing the download of their content.

In contrast, the DOMContentLoaded event is triggered on the document when the page is fully prepared. It patiently waits for both the full HTML markup and any necessary scripts to be loaded before firing. This event is supported by all browsers except for IE versions below 9.

Answer 8

When all content has finished loading, the load event serves as a general signal for completion. Various elements are able to support this, such as external SCRIPT and IMG, IFRAME which trigger the event upon completing the download of their content.

In contrast, the DOMContentLoaded event is triggered on the document when the page is fully prepared. It patiently waits for both the full HTML markup and any necessary scripts to be loaded before firing. This event is supported by all browsers except for IE versions below 9.

Answer 9

Answer №5

Learn more details regarding the onDomready function.

The code snippet below demonstrates how JSFiddle wraps and executes our code, providing support for browsers lacking the addEventListener method to handle the DOMContentLoaded event.

<script type="text/javascript">
//<![CDATA[
    var VanillaExecuteOnDomReady = function() {
        // Insert your JavaScript code here.
    }

    var hasRunFlag = 0;

    if (document.addEventListener) {
        document.addEventListener("DOMContentLoaded", function(){
            hasRunFlag = 1; 
            VanillaExecuteOnDomReady();
        }, false);
    } else if (document.all && !window.opera) {
        document.write('<script type="text/javascript" id="loadcontenttag" defer="defer" src="javascript:void(0)"><\/script>');
        var loadcontenttag = document.getElementById("loadcontenttag")
        loadcontenttag.onreadystatechange=function(){
            if (this.readyState=="complete"){
                hasRunFlag=1;
                VanillaExecuteOnDomReady();
            }
        }
    }

    window.onload = function(){
      setTimeout("if (!hasRunFlag){VanillaExecuteOnDomReady}", 0);
    }
//]]>
</script>

Answer 10

Learn more details regarding the onDomready function.

The code snippet below demonstrates how JSFiddle wraps and executes our code, providing support for browsers lacking the addEventListener method to handle the DOMContentLoaded event.

<script type="text/javascript">
//<![CDATA[
    var VanillaExecuteOnDomReady = function() {
        // Insert your JavaScript code here.
    }

    var hasRunFlag = 0;

    if (document.addEventListener) {
        document.addEventListener("DOMContentLoaded", function(){
            hasRunFlag = 1; 
            VanillaExecuteOnDomReady();
        }, false);
    } else if (document.all && !window.opera) {
        document.write('<script type="text/javascript" id="loadcontenttag" defer="defer" src="javascript:void(0)"><\/script>');
        var loadcontenttag = document.getElementById("loadcontenttag")
        loadcontenttag.onreadystatechange=function(){
            if (this.readyState=="complete"){
                hasRunFlag=1;
                VanillaExecuteOnDomReady();
            }
        }
    }

    window.onload = function(){
      setTimeout("if (!hasRunFlag){VanillaExecuteOnDomReady}", 0);
    }
//]]>
</script>

Could you please explain the distinctions among onLoad, onDomready, No wrap - in <head>, and No wrap - in <body>?

CLICK HERE FOR THE JSFIDDLE EXAMPLE

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Does the notion of "Execution context and the stack" only pertain to web browsers?

When the collapse button is clicked, I aim to increase the top value by 100. Subsequently, upon a second click, the top value should

Choose children input textboxes based on the parent class during the onFocus and onBlur events

Comparing the size of a MongoDB array to another field in a document: how can it be done?

Attempting to incorporate Google charts into a div using jQuery's load function

Steps for displaying only one collapse at a time using either Bootstrap 3 or Bootstrap 4

Discover the location by determining the distance from established points

jquery dialog box displaying a webpage

What causes a syntax error when attempting to install Babel?

Can you explain the distinction between using .classA versus .classB.classA when styling with CSS?

Troubleshooting CSS Hover Not Displaying Properly in Angular 14

Retrieve documents from MongoDB database that have specific characteristics

Utilizing Javascript to Generate a Comma-Separated List from Multiple Select Elements

Background image not displaying in new tab after Chrome extension installation

Is there a way to connect two tables using CSS pseudo-selectors?

Using percentages to position Div elements

The action 'onDeleteClick' cannot be executed as the property is undefined

"Troubleshooting: The Dropzone js code sample from the documentation

Export data from Angular Material data table to Excel format

Retrieving data from a <span> element within a webpage created using ReactJS