How do I use document.getElementById() in a separate js file?

Learning how to do webdev for the first time, and to make things neater, I'm storing my scripts in their own files. I've been trying to figure out how to access elements from this separate file but I cannot figure out how.

This is the relevant bit of the JS file

function getSelectedText() {
        if document.getElementById("card1").checked == true {
            //code here
        }
}

This is the relevant HTML it's trying to access

<script type="text/javascript" src="js/cards.js"></script>
<input id="card1" type="radio" name="card" value="1" checked>Test1<br>
<input id="card2" type="radio" name="card" value="2">Test2<br>
<input id="card3" type="radio" name="card" value="3">Test3<br>
<button onclick="updateCard()">View card</button>

I want to access and edit the radio inputs but the JavaScript file throws an error when I try to reference document. Is there any way to reference the HTML file or do I need to use a different method/shove the code into the html?