Блог

Я изучаю основы Javascript и пытаюсь создать модал, который заменяет предупреждение, я почти закончил, но у меня проблема с querySelector на кнопке, чтобы закрыть его. Он возвращает undefined, даже если я проверяю его с помощью if conditional.

 
function getTemplate(templateName) {
  let template = document.querySelector(templateName);
  return template.innerHTML;
}

function createFragment(htmlStr) {
  let frag = document.createDocumentFragment();
  let temp = document.createElement('div');
  temp.innerHTML = htmlStr;
  while (temp.firstChild) {
    frag.appendChild(temp.firstChild);
  }
  return frag;
}

function putTemplate(template) {
  document.body.appendChild(createFragment(template));
}

function openAlert(alertName, btnOpen) {
  let openBtn = document.querySelector(btnOpen);

  openBtn.addEventListener('click', function () {
    putTemplate(getTemplate(alertName));
  });
}

function closeAlert(alertName, btnClose) {
  let closeBtn = document.querySelector(btnClose);
  if (closeBtn) {
    closeBtn.addEventListener('click', function () {
      let alertWrapper = document.querySelector(alertName);
      alertWrapper.parentNode.removeChild(alertWrapper);
    });
  }
}

function Alert(alertName, btnOpen, btnClose) {
  openAlert(alertName, btnOpen);
  closeAlert(alertName, btnClose);
}

Alert('#alertTemplate', '.activeBtn', '.deactive');
  

И это разметка:

 <template id="alertTemplate">
        <div id="alertWrapper">
          <h1></h1>
          <div class="alertBox confirmAlert" role="alert">
            <p></p>
            <button class="closeBtn deactive troll"></button>
            <button class="acceptBtn deactive"></button>
          </div>
        </div>
      </template>
``