Order of Operations- Sourcing of JS code in HTML index

Moralis General
#1

When initializing the js code

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

(the backend of the buttons) prior to the below I would get an error that my queryselector('btn-login") was null. But when placing the script after the buttons my code works. Why is this?

<div class="col-12 col-md-6 d-flex align-items-center justify-content-md-center">
                <button class="btn btn-success btn-sm" id="btn-login">Login</button>
                <button class="btn btn-success btn-sm" id="btn-buy-crypto">Buy Crypto</button>
                <button class="btn btn-danger btn-sm" id="btn-logout">Logout</button>
            </div>
#2

Putting the script tag below means it runs after the button elements are created so you don’t get that error. Order matters.