queryselector未定义，即使经过条件检查

问题描述

我正在学习Javascript的基础知识，并且试图做一个替换警报的模式，我快完成了，但是关闭按钮时的querySelector出现了问题。即使我使用if条件检查它，它也会返回undefined。

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>
``

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）