Code inside DOMContentLoaded event not working

Question

I have used

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
</head>
<body>
  <button type="button" id="button">Click</button>
  <pre id="output">Not Loading...</pre>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.17.0/babel.min.js"></script>
  <script type="text/babel">
    document.addEventListener('DOMContentLoaded', function () {
      const button = document.getElementById('button');
      const output = document.getElementById('output');

      output.textContent = 'Loading...';

      addEventListener('click', function () {
        output.textContent = 'Done';
      });
     });
  </script>
</body>
</html>

but it seems the code inside document.addEventListener('DOMContentLoaded', function () {}); is not loading.

If I remove this from my code, it suddenly works.

I have made a JS Bin here.

FWIW, there's no need at all for using `DOMContentLoaded`. Your script is already at the very end of the document, which is plenty good enough. — T.J. Crowder, Oct 12 '16 at 08:17
This is just an example. In my other scripts, I am using arrow functions, so I need to use babel to convert it from ES6 to ES5 — Jamgreen, Oct 12 '16 at 08:18
@Mohammad: The OP is using Babel Standalone to use Babel's transpiling *in* the browser. That's how you tell Babel Standalone which scripts it should transpile. — T.J. Crowder, Oct 12 '16 at 08:26

score 160 · Answer 1 · edited Apr 28 '22 at 20:33

160

It's most likely because the DOMContentLoaded event was already fired at this point. The best practice in general is to check for document.readyState to determine whether or not you need to listen for that event at all.

if (document.readyState !== 'loading') {
    console.log('document is already ready, just execute code here');
    myInitCode();
} else {
    document.addEventListener('DOMContentLoaded', function () {
        console.log('document was not ready, place code here');
        myInitCode();
    });
}

function myInitCode() {}

edited Apr 28 '22 at 20:33

Francisco

10,918
6
34
45

answered Oct 12 '16 at 08:17

jAndy

231,737
57
305
359

1

Nice one -- it took the OP asking me what to do about whether it had run to inspire me to add that, then I see you already had... – T.J. Crowder Oct 12 '16 at 08:25
Ha, yes I guess that is pretty much the standard way to go in vanilla JS nowadays. – jAndy Oct 12 '16 at 08:27
Well, I think the standard way to go is just to ensure the `script` is at the end of body and not fuss about with `DOMContentLoaded`. It's only code that will be used where the author has no control over where the script tag will go that need this (like, amusingly, Babel Standalone). – T.J. Crowder Oct 12 '16 at 08:30
Is that so T.J.? If your script block is at the end of the body it can never collide with "other stuff" DOMContentLoaded watches over? – jAndy Oct 12 '16 at 08:31
If it's at the end of `body`, all of the elements defined above it are present and accessible, yes. – T.J. Crowder Oct 12 '16 at 08:33
You're right. On the other hand, it looks like static build processes like webstack getting very popular. In such environments, where js code pretty much regulates everything (css loading for instance) we want to load those js-bundles as early as possible. I guess in such cases we really need the DOMContentLoaded event again. – jAndy Oct 12 '16 at 08:37
Why? You don't want to wait for DOMContentLoaded to load your CSS. – T.J. Crowder Oct 12 '16 at 08:39
No of course not, so we load a precompiled js-bundle as early as possible (head). But since javascript now regulates the deploying of stylesheet alongside program logic, you need to listen for DCL within that bundle to execute your js logic. – jAndy Oct 12 '16 at 08:41
Ah, I see. Not a fan of using script to load CSS, but I see how if you conflate things like that, you'd need the event. – T.J. Crowder Oct 12 '16 at 08:44
20

Don't check for `document.readyState === 'complete'`! Check for `document.readyState !== 'loading'`, because it is useless to listen for `DOMContentLoaded` if `document.readyState` is 'interactive'. Test your error and fix the code. – Ruslan May 24 '17 at 08:30
This code is working on codesandbox.io. `Document.readState` is already `complete` in the preview window without being handled within `DOMContentLoaded` event handler. – dance2die Apr 08 '18 at 03:14
1

@Ruslan could you tell why it is useless? Do you mean that it will also not fire if the state is equals to 'interactive'? – simply good Jun 04 '21 at 20:55

T.J. Crowder · Answer 2 · 2017-05-24T08:21:07.477

The event has already fired by the time that code hooks it. The way Babel standalone works is by responding to DOMContentLoaded by finding and executing all of the type="text/babel" scripts on the page. You can see this in the index.js file:

// Listen for load event if we're in a browser and then kick off finding and
// running of scripts with "text/babel" type.
const transformScriptTags = () => runScripts(transform);
if (typeof window !== 'undefined' && window && window.addEventListener) {
  window.addEventListener('DOMContentLoaded', transformScriptTags, false);
}

Just run the code directly, without waiting for the event, since you know Babel standalone will wait for it for you.

Also note that if you put you script at the end of the body, just before the closing </body> tag, there's no need to wait for DOMContentLoaded even if you don't use Babel. All of the elements defined above the script will exist and be available to your script.

In a comment you've asked:

But I am using Babel standalone in development, but I will pre-compile it when I go into production. Should I add it back on when I go into production?

Just ensure that your script tag is at the end of body as described above, and there's no need to use the event.

If it's important to you to use it anyway, you can check to see whether the event has already run by checking document.readyState (after following the link, scroll up a bit):

function onReady() {
    // ...your code here...
}
if (document.readyState !== "loading") {
    onReady(); // Or setTimeout(onReady, 0); if you want it consistently async
} else {
    document.addEventListener("DOMContentLoaded", onReady);
}

document.readyState goes through these stages (scroll up slightly from the link above):

Returns "loading" while the Document is loading, "interactive" once it is finished parsing but still loading sub-resources, and "complete" once it has loaded.

But I am using Babel standalone in development, but I will pre-compile it when I go into production. Should I add it back on when I go into production? — Jamgreen, Oct 12 '16 at 08:19
@Jamgreen: I've added a response to that comment to the answer above. — T.J. Crowder, Oct 12 '16 at 08:24
@Ruslan: **Thank you.** I was misled by the spec saying *"Each document has a current document readiness. When a Document object is created, it must have its current document readiness set to the string "loading" if the document is associated with an HTML parser, an XML parser, or an XSLT processor, and to the string "complete" otherwise. Various algorithms during page loading affect this value. When the value is set, the user agent must fire a simple event named readystatechange at the Document object."* But just *above* that, it's clear that there's an intermediate `"interactive"` state! :-) — T.J. Crowder, May 24 '17 at 08:22

score 2 · Answer 3 · answered Oct 08 '17 at 06:34

Thanks to Ruslan & here is the full code snippet with the convenient detach of the DOMContentLoaded handler after it is used.

'use strict';
var dclhandler = false;
if (document.readyState !== 'loading') {
    start();
} else {
    dclhandler = true;
    document.addEventListener('DOMContentLoaded', start);
}
function start() {
    if (dclhandler) { document.removeEventListener('DOMContentLoaded', start); }
    console.log('Start the site`s JS activities');
}

score 2 · Answer 4 · answered Jan 09 '20 at 12:44

Another option would be to use the readystatechange event. The readystatechange event fires when the readyState attribute of the document has changed. The readyState attribute can be one of the following three values: 'loading', 'interactive', or 'complete'. An alternative to using the DOMContentLoaded event is to look for the readyState to equal 'interactive' inside of the document's readystatechange event, as in the following snippet.

document.onreadystatechange = function () {
  if (document.readyState === 'interactive') {
    // Execute code here
  }
}

Although, in your case, the document's readyState seems to have already reached 'complete'. In that case, you can simply swap 'interactive' for 'complete' in the snippet above. This is technically equal to the load event instead of the DOMContentLoaded event.

Read more on MDN, Document.readyState Document: readystatechange event

i just had a problem where the DOMContentLoaded not worked, so with your answer and the readystate = complete check it worked fine - Thanks a lot! — user3714751, Jun 26 '21 at 16:46

score 2 · Answer 5 · answered Oct 17 '21 at 16:43

I also encountered the same problem when I enable both HTML Auto Minify and Rocket Loader in Cloudflare. the conclusion is that DOMContentLoaded event is missing when handled by these features simultaneously.

You can add the following code before all DOMContentLoaded event listeners in the HTML file script block to fix this.

var inCloudFlare = true;
window.addEventListener("DOMContentLoaded", function () {
    inCloudFlare = false;
});
if (document.readyState === "loading") {
    window.addEventListener("load", function () {
        if (inCloudFlare) window.dispatchEvent(new Event("DOMContentLoaded"));
    });
}

For explanation please go to my blog.

https://hollowmansblog.wordpress.com/2021/10/18/solution-to-missing-domcontentloaded-event-when-enabling-both-html-auto-minify-and-rocket-loader-in-cloudflare/

score 1 · Answer 6 · answered Jun 06 '20 at 19:43

1

My clean aproach...

if (document.readyState !== 'loading') init()
else document.addEventListener('DOMContentLoaded', init);

function init() {
    console.log("Do it !");
    ...
}

answered Jun 06 '20 at 19:43

Daniel De León

13,196
5
87
72

score 0 · Answer 7 · answered May 06 '20 at 17:24

0

I would use document.addEventListener("DOMContentLoaded", () => {/*yourcode*/});

answered May 06 '20 at 17:24

Robin Grgi

1

score 0 · Answer 8 · answered May 07 '20 at 11:32

https://learnwithparam.com/blog/vanilla-js-equivalent-of-jquery-ready/

function ready(callbackFunc) {
  if (document.readyState !== 'loading') {
    // Document is already ready, call the callback directly
    callbackFunc();
  } else if (document.addEventListener) {
    // All modern browsers to register DOMContentLoaded
    document.addEventListener('DOMContentLoaded', callbackFunc);
  } else {
    // Old IE browsers
    document.attachEvent('onreadystatechange', function() {
      if (document.readyState === 'complete') {
        callbackFunc();
      }
    });
  }
}

ready(function() {
  // your code here
});

As of the time of this post - `Run code snippet` comes up empty — Michael Nelles, May 07 '20 at 12:04

score -1 · Answer 9 · answered Aug 16 '22 at 10:42

-1

DOMContentLoaded event is working in when we call it from script tag. But that event not working in js file

answered Aug 16 '22 at 10:42

manikanta

1
1

1

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – jasie Aug 19 '22 at 11:23

score -2 · Answer 10 · answered Apr 28 '21 at 14:21

I've come into this problem with my live server. My live server is running on cloudflare with some cache and rocket loading js. I assume this is what is causing the unexpected behaviour. The code was working perfectly on local server when using DOMContentLoaded, but not on live.

If you can use jQuery, switching to

jQuery(document).ready(function() {
//code...
})

work as expected.

Code inside DOMContentLoaded event not working

10 Answers10

Linked