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.