Tengo un botón en HTML para el que estoy agregando un detector de eventos en 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") });

El botón está oculto de forma predeterminada y quiero agregar el detector de eventos después de que el usuario interactúe con un mapa. Sin embargo, después de que el botón se vuelve visible, aparece un error que dice No se pueden leer las propiedades de nulo (leyendo 'addEventListener'), aunque el elemento existe, como se muestra al volverse visible.

Sin embargo, si agrego el detector de eventos dentro de la función maplistener:

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

el eventListener funciona. Estoy confundido en cuanto a por qué esto funcionaría en la función mapListener, y no por sí solo. Por favor hagamelo saber.