Is there a difference in js script in HTML vs external js script?

this is my first time posting so I might not be posting in the correct method. I’m trying to display the current value for a slider via an output. It doesn’t work when I put my script externally, but it does when I put it in the HTML file, so I’m confused.

**Here’s my initial code: **
(index.html)

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

<label for="max-invite">Select maximum number of invitations</label>
        <input type="range" name="max-invite" id="max-invite" min="1" max="30" value="10" step="1">
        <output class="invite-output" for="max-invite"></output>

(js.js)

const invite = document.querySelector('#max-invite');
      const output = document.querySelector('.invite-output');

      document.addEventListener('DOMContentLoaded', function(){
        output.textContent = invite.value;
      }) 

      invite.addEventListener('input', function() {
        output.textContent = invite.value;
      });

… and there is no display for the output.
I pasted the script direct onto the HTML file and it worked.
Is there a difference? Is there something I need to change to make the external script method work? TIA.