12

I use JSFiddle for editing my code. However, in certain codes when I'm running JavaScript or jQuery, it doesn't work unless I select "No wrap - <head>" or "No wrap - <body>".

JSFIDDLE HERE

In the fiddle above, you will notice that clicking the <button> element will not alert() you unless you've selected either the extension "No wrap - <head>" or "No wrap - <body>".

I'm a curious person who likes to understand how things work. What exactly does that option change, and why would you change it?

Ian Hazzard
  • 7,661
  • 7
  • 34
  • 60
  • 1
    possible duplicate of [Simple example doesn't work on JSFiddle](http://stackoverflow.com/questions/5431351/simple-example-doesnt-work-on-jsfiddle) – apaul Nov 18 '14 at 03:04
  • 3
    No, that's definitely not the same question, @apaul34208. – Ian Hazzard Nov 18 '14 at 03:15

5 Answers5

9

onLoad:

  • This means wrap the code so it will run in onLoad window event. This runs when the entire page has loaded (such as images).

onDomReady:

  • This means to wrap the code so it will run in onDomReady window event. This runs when the DOM has loaded.

no wrap - in <head>:

  • This will place your JavaScript code in the <head> section

no wrap - in <body>:

  • This will place your JavaScript code in the <body> section

I would like to note that more information can be found in jsFiddle's documentation.

Spencer Wieczorek
  • 21,229
  • 7
  • 44
  • 54
  • So can you explain why my functions don't work when it's set to `onLoad`? – Ian Hazzard Nov 18 '14 at 03:47
  • Because it's running on the `onLoad` event. It's the same way why: `window.onload = function(){ ... };` will also not work. Basically we added the function before we defined it. – Spencer Wieczorek Nov 18 '14 at 03:56
7

The onLoad and onDomready wrap the code so that the JavaScript runs when the document load or DOM ready events fire. It's as if your wrote your code like this:

Stackoverflow Ref

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

The no wrap options are if you added your script tag to the head or the body tags of the document like how you're probably used to doing it. 

 <html> 
 <head> 
       <title>Stuff</title> 
 <script> 
   /* your code */ 
 </script> 
 </head>
Community
  • 1
  • 1
Parth Akbari
  • 641
  • 7
  • 24
1

onload means all sources in the page are loaded ( include image css and js), domReady just means the dom tree is done.

user2822889
  • 59
  • 3
1

The load event is a general “loading complete” signal. It is supported by many elements. For example, external SCRIPTand IMG, IFRAME trigger it when downloading of their content finishes.

The DOMContentLoaded event triggers on document when the page is ready. It waits for the full HTML and scripts, and then triggers.All browsers except IE<9 support it.

jamesxiang
  • 708
  • 5
  • 10
0

More information about onDomready.

Below is how JSFiddle actually wraps our codes to run. They support the browsers which do not have addEventListener method to listen to DOMContentLoaded event.

<script type="text/javascript">
//<![CDATA[
    var VanillaRunOnDomReady = function() {
        // Your own JS codes are placed here.
    }

    var alreadyrunflag = 0;

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

    window.onload = function(){
      setTimeout("if (!alreadyrunflag){VanillaRunOnDomReady}", 0);
    }
//]]>
</script>
themefield
  • 3,847
  • 30
  • 32