How do i put my typing script outside my html file?

I have my site, with a script that types out an array of things after a h2 in a span.

First I had to include the script in the html file, the whole js script, which is too long and too useless within the html file also. So I tried to get it outside of my html file, and include it, like this.

<script src="javascript/index.js"></script>

But then nothing happens with my span

<h2>I am <span id="typing"></span></h2>

And this is my index.js

var typed = new Typed('#typing', {
    strings: ['first thing', 'second thing'],
    typeSpeed: 30,
    loop: true
});

You need to wait for the dom to be loaded.

document.addEventListener("DOMContentLoaded", function(event) {
    var typed = new Typed('#typing', {
      strings: ['first thing', 'second thing'],
      typeSpeed: 30,
      loop: true
    });
});