O código dentro do evento DOMContentLoaded não está funcionando

Question

Oct 12, 2016, 10:14 AM

babeljs javascript domcontentloaded addeventlistener

O código dentro do evento DOMContentLoaded não está funcionando

Eu tenho usado

<!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>

mas parece o código dentrodocument.addEventListener('DOMContentLoaded', function () {}); não está carregando.

Se eu remover isso do meu código, ele funcionará repentinamente.

Eu fiz umJS Bin aqui.