尝试单击隐藏然后再次可见的元素时出错

Posted 2023-02-26

【中文标题】尝试单击隐藏然后再次可见的元素时出错

【英文标题】：error when trying to click on element that was hidden and then made visible again

【发布时间】：2019-01-06 14:50:00

【问题描述】：

当我单击一个按钮时，我使用 axios 将一些数据发送到我的 node.js 后端，当单击该按钮时，我将其隐藏并显示一个微调器。如果出现问题，我会隐藏微调器并再次显示按钮。这很好用。但是，如果我在按钮再次可见后单击它，我会收到一条错误消息：

未捕获的类型错误：无法读取 null 的属性“insertAdjacenthtml” 在 renderLoader (26786sdg72635287hd) 在 HTMLAnchorElement.document.querySelector.addEventListener.e

HTML：

<div class="spinner"></div>

javascript

    const renderLoader = parent => 
        const loader = `
           <div class="loader">
                <svg>
                    <use href="/images/icons.svg#icon-cw"></use>
                </svg>
            </div>
        `;
        parent.insertAdjacentHTML('afterbegin', loader);
    ;

    const clearLoader = () => 
        const loader = document.querySelector('.spinner');
        if (loader) 
            loader.parentElement.removeChild(loader);
        
    ;

    document.querySelector('.approve').addEventListener('click', e => 
        e.preventDefault();
        const csrf = document.querySelector('[name=_csrf]').value;
        const productId = document.querySelector('[name=productId]').value;
        document.querySelector('.approve').style.visibility = 'hidden';
        document.querySelector('.reject').style.visibility = 'hidden';

        renderLoader(document.querySelector('.spinner'));


        axios.post('/account/approve/' + productId, 
            status: 'approved'
        ,
            
                headers: 
                    'csrf-token': csrf
                

            )
            .then(response => 

                const approveBox = document.querySelector('.dashboard-list-box');
                const successMessage = document.querySelector('.success');
                approveBox.classList.add('fade-out');
                successMessage.classList.add('notification');
                successMessage.innerHTML = response.data.message;
                clearLoader();

            )
            .catch(err => 
                clearLoader();
                document.querySelector('.approve').style.visibility = 'visible';
                document.querySelector('.reject').style.visibility = 'visible';
            );
    );

【参考方案1】：

如果出现错误，将调用 clearLoader 删除 .spinner 元素，我认为它不应该，要解决此问题只需更改此行：

const loader = document.querySelector('.spinner');

到

const loader = document.querySelector('.loader');

从clearLoader 函数内部。考虑到变量的名称，这似乎是您的意图。

【讨论】：

啊，是的。就是这个！

【参考方案2】：

第一次单击您将删除 dom '.spinner' 中的元素，第二次单击后，您将调用此 renderLoader 函数，并且您将 html 元素作为道具发送，因此您无法执行此操作，因为您使用此函数 '.spinner' html 删除元素所以你需要隐藏元素或者你需要重新创建这个元素。

【讨论】：

我想我明白你在说什么，但是如果我再次单击该按钮，那么它将再次启动整个过程，即：再次使用加载器创建 div renderLoader(document.querySelector('.spinner')); 嗯，它应该是。

【参考方案3】：

就隐藏您拥有的document.querySelector('.approve').style.visibility = 'hidden' 等特定元素而言，您应该查看document.querySelector('.approve').classList.add('hide); 之类的内容

关于为什么 insertAdjacentHTML 不起作用，请将其发布到 const 'renderLoader' 的范围之外。

另外，创建一个对象来说明document.querySelector('.approve') 和document.querySelector('.reject')