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

时间:2020-03-10 22:58:28

标签: javascript html web

我的网站上有几个按钮,它们会调用一个脚本来将内容打开到全屏状态,并且我还希望能够单击创建的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 is undefined”,这很奇怪,因为只有在单击之后才应调用该视图。有什么想法吗?

0 个答案:

没有答案