Best way to initialize html elements in JavaScript for reusability?

The way I did this was by getting the html elements and declaring them as global const variables inside a function() {} that encapsulates the whole program. It works, but I'm unsure if this is good practice. Is there a way to allow reusability of an element without using an omnipresent function() {} or will this be fine?

My Code:

document.addEventListener('DOMContentLoaded', function() {

    //The global const elements from HTML doc
    const square = document.getElementsByClassName("square");
    const mole = document.getElementsByClassName("mole");
    const timeLeft = document.getElementsByClassName("time-left")[0]; //# for id elements

    //Initialize score, result, and time
    let score = document.getElementsByClassName("score")[0];
    let result = 0;
    let currentTime = timeLeft.textContent;

    //Call countDown function every 1000 milliseconds or 1 second
    let timerId = setInterval(countDown, 1000);

    function main() {

        //Add an event listener for each square called mouseup
        for (let i = 0; i < square.length; i++) {
            square[i].addEventListener("mouseup", checkHit);
        }
        
        moveMole()
    }

    //Once the event triggers, check if val of current square equals to hitPosition
    //If it is, update result and hitPosition
    function checkHit(event) {
        if (this.id === hitPosition) {
            result = result + 1;
            score.textContent = result;
            hitPosition = null;
        }
    }

    //Move mole to a random square every 1000 milliseconds
    function moveMole() {
        let timerId = null;
        timerId = setInterval(randomSquare, 1000);
    }

    //Choose a randomSquare to put the mole
    function randomSquare() {

        //Remove mole from the class name to make sure there isn't any forgotten divs that were used for styling
        for (let i = 0; i < square.length; i++) {
            square[i].classList.remove("mole");
        }

        //Math.floor rounds down
        //math.random() * 9 uses a position from 1 to 9
        let randomPosition = square[Math.floor(Math.random() * 9)];

        //Set the mole to the randomPostion
        randomPosition.classList.add("mole");

        //Assign the id of the randomPositon to hitPosition for comparing later
        hitPosition = randomPosition.id;
    }

    //Counts our timer down
    function countDown() {

        //Decrement currentTime and show currentTime
        currentTime--;
        timeLeft.textContent = currentTime;

        //If currentTime is 0
        //Clear the timer set by the setInterval method
        //Stops the execution of randomSquare
        //Alert user of final score
        //Reset time and result
        if (currentTime === 0) {
            alert("GAME OVER! Your final score is " + result);

            timeLeft.textContent = 30;
            currentTime = timeLeft.textContent;
            result = 0;
            score.textContent = result;
        }
    }

    main();
})