Why evenlistener not working properly at jsfiddle?

Question

Please have a look at jsfiddle or here:

JS:

document.addEventListener('DOMContentLoaded', function myFunction() {
alert("Hello! I am an alert box");
}, false);

why this evenlistener not working? It should work because it works everywhere else. I think it's because of the iframe but I dunno...

Any idea?

Answer 1

You have configured JS Fiddle to wrap your code in an onload event handler.

The sequence of events is:

1. Load event handler is bound.
2. DOM Content Loaded fires. There is nothing listening for it.
3. Load event fires.
4. Load handler executes and binds the DOM Content Loaded listener

You need to bind the event handler before the event it is listening for fires. Change the JS Fiddle options to one of the "no wrap" choices. Since you aren't touching anything in the DOM, it doesn't matter which of the two you select.

Answer 2

Change load type to No wrap - in body

To change Load Type, click on label JAVASCRIP in script section, a pop will appears.

Updated Fiddle.

This might be because, by default, your script's load type in On Load, so all your script is loaded but your DOM is yet to render.