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();  })  

https://stackoverflow.com/questions/66717848/best-way-to-initialize-html-elements-in-javascript-for-reusability March 20, 2021 at 11:04AM