Code inside DOMContentLoaded event not working
<p>I have used</p>

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

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

      output.textContent = 'Loading...';

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

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

<p>If I remove this from my code, it suddenly works.</p>

<p>I have made a <a href="https://jsbin.com/misuxuhiba/edit?html,output" rel="noreferrer">JS Bin here</a>.</p>