What is the difference between onLoad, onDomready, No wrap - in <head>, and No wrap - in <body>?

javascript jsfiddle
Drazzah picture Drazzah · Nov 18, 2014 · Viewed 11.3k times · Source

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?

Answer

Spencer Wieczorek picture Spencer Wieczorek · Nov 18, 2014

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.

Related questions

Print Var in JsFiddle

How would I print something to the result screen in JsFiddle from my JavaScript. I can't use document.write(), it doesn't allow it, neither print. What should I use?

Read More
How to get console inside jsfiddle

How can I get the console to show in a fiddle on JSfiddle.com? I recently saw a fiddle that had the console embedded in the fiddle, anyone know how this can be done?

Read More
jQuery event.preventDefault() not working in Firefox (JSFiddle included)

This is a kind of similar duplicate to some others here, but I think I'm using event.preventDefault() correctly in this case. Here's a JSFiddle you can see the code with: http://jsfiddle.net/SeEw2/2/ Basically, click the Submit button. …

Read More