I have a button in HTML that I am adding an event listener for in JavaScript.

<button class="Button" id="First" type="button">Confirm First Location</button>

map.addListener("click", (mapsMouseEvent) => {
      document.getElementById("First").style.visibility = "visible"
  }

  document.getElementById("First").addEventListener("click", function() {
    console.log("button clicked")
  });

The button is hidden by default and I want to add the event listener after the user interacts with a map. However, after the button becomes visible, I get an error saying Cannot read properties of null (reading 'addEventListener'), even though the element exists, as shown by it becoming visible.

However, if I add the event listener inside the maplistener function:

map.addListener("click", (mapsMouseEvent) => {
      document.getElementById("First").style.visibility = "visible"
      document.getElementById("First").addEventListener("click", function() {
        console.log("clicked")
      });
  }

the eventListener works. I'm confused as to why this would work in the mapListener function, and not on its own. Please let me know.