добавление одного слушателя событий в другой и ожидание полной загрузки dom

Question

У меня есть класс с маркером на карте, который при нажатии открывает всплывающее окно с кнопкой на нем (с надписью «резерв»).

Я знаю, что могу использовать

document.addEventListener("DOMContentLoaded", function(event) {
        console.log("document loaded");
      });

но проблема в том, что этот консольный журнал никогда не вызывается. Когда я пытаюсь добавить прослушиватель событий к кнопке, вот так:

marker.addListener("click", () => {
      this.reserveButton = document.getElementById("reserve");
      this.reserveButton.addEventListener("click", this.reserveFunction);
}

Я получаю ошибку, TypeError: Cannot read property 'addEventListener' of null. Это имеет смысл, так как скрипт выполняется до загрузки HTML. Каков наилучший способ обеспечить загрузку HTML в первую очередь?

редактировать: за обсуждение: код компонента: чтобы назвать модальный это модальный

openReserveModal: (order, vendor) => dispatch(openModal({ type: 'reserve', order: order, vendor: vendor }))

открытый резервный модал затем используется в конструкторе менеджера маркеров

    this.MarkerManager = new MarkerManager(
      this.map,
      this.props.openReserveModal
    );

менеджер маркеров, который обрабатывает данные для маркера (при нажатии открывается всплывающее окно)

  constructor(map, modal) {
    this.map = map;
    this.modal = modal;
    this.markers = {};
    this.openWindow = null;
    this.highlight = null;
    this.reserveButton = null;
    this.reserveFunction = null;

резервный див:

<div id="map-reserve" class="info-win-name info-win-reserve">
 RESERVE
</div >

резервная функция:

      this.reserveFunction = () => {
        this.modal(order, vendor);
      };