时间戳

首页 > 解决方案 > 尝试单击隐藏然后再次可见的元素时出错

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

问题描述

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

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

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';
            });
    });

标签： javascript

解决方案

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

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

至

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

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

推荐阅读