如何解决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 举报,一经查实,本站将立刻删除。