Javascript 当有多个按钮时,如何通过单击关闭按钮打开div?

Javascript 当有多个按钮时,如何通过单击关闭按钮打开div?,javascript,html,web,Javascript,Html,Web,我在我的网站上有几个按钮,它们调用一个脚本来全屏打开内容,我还希望能够单击关闭创建的div来关闭它。这是可行的,但是在打开一个容器之后,我的程序在尝试单击另一个按钮时会产生错误,该容器在之后被删除 function closeDiv(evt) { const maindiv = document.getElementById('div3'); let targetElement = evt.target; do { if

我在我的网站上有几个按钮,它们调用一个脚本来全屏打开内容,我还希望能够单击关闭创建的div来关闭它。这是可行的,但是在打开一个容器之后,我的程序在尝试单击另一个按钮时会产生错误,该容器在之后被删除

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,覆盖整个窗口,以吸收单击事件。将尝试此方法,谢谢