Javascript 当有多个按钮时,如何通过单击关闭按钮打开div?
我在我的网站上有几个按钮,它们调用一个脚本来全屏打开内容,我还希望能够单击关闭创建的div来关闭它。这是可行的,但是在打开一个容器之后,我的程序在尝试单击另一个按钮时会产生错误,该容器在之后被删除Javascript 当有多个按钮时,如何通过单击关闭按钮打开div?,javascript,html,web,Javascript,Html,Web,我在我的网站上有几个按钮,它们调用一个脚本来全屏打开内容,我还希望能够单击关闭创建的div来关闭它。这是可行的,但是在打开一个容器之后,我的程序在尝试单击另一个按钮时会产生错误,该容器在之后被删除 function closeDiv(evt) { const maindiv = document.getElementById('div3'); let targetElement = evt.target; do { if
function closeDiv(evt) {
const maindiv = document.getElementById('div3');
let targetElement = evt.target;
do {
if (targetElement == maindiv.childNodes[1]) {
return;
}
targetElement = targetElement.parentNode;
} while (targetElement);
var viewpost = maindiv.childNodes[1];
viewpost.parentNode.removeChild(viewpost);
maindiv.classList.remove('viewcontainer');
};
function buttonClick(button) {
var div = button.parentElement.parentElement;
var clone = div.cloneNode(true);
var element = div.childNodes;
var username = element[1].innerText;
var title = element[7].innerText;
var contenttext = div.childNodes[3].value;
var clone = document.createElement('div');
clone.classList.add('viewcontainercon');
var viewuser = document.createElement('p');
viewuser.classList.add('viewcontaineruser');
var text = document.createTextNode(username);
viewuser.appendChild(text);
clone.appendChild(viewuser)
var viewtitle = document.createElement('p');
viewtitle.classList.add('viewcontainertitle');
var text = document.createTextNode(title);
viewtitle.appendChild(text);
clone.appendChild(viewtitle);
var viewcontent = document.createElement('p');
viewcontent.classList.add('viewcontainercontent');
var text = document.createTextNode(contenttext);
viewcontent.appendChild(text);
clone.appendChild(viewcontent);
document.getElementById('div3').classList.add('viewcontainer');
document.getElementById('div3').appendChild(clone);
document.addEventListener("click", function(event){
var isClickInside = button.contains(event.target);
if (!isClickInside) {
closeDiv(event);
}
});
}
这个错误特别是closeDiv()函数中的“viewpost未定义”,这很奇怪,因为在单击之后才应该调用它。有什么想法吗?一种方法是在显示的div后面放置另一个div,覆盖整个窗口,以吸收单击事件。将尝试此方法,谢谢