Question

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

未捕获的TypeError：无法读取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';
            });
    });

Answer 1

如果发生错误，将调用clearLoader来删除.spinner元素，但我认为不应该这样做，要解决此问题，只需更改此行：

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

到

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

从clearLoader函数内部

。鉴于变量的名称，这似乎是您的意图。

Answer 2

第一次单击，您将删除dom'.spinner'中的元素，第二次单击后，您将调用此renderLoader函数，并且您将html元素作为prop发送，因此您无法执行此操作，因为使用此函数..spinner'html元素，因此您需要hide元素，或者需要再次创建此元素。

Answer 3

在隐藏诸如document.querySelector('.approve').style.visibility = 'hidden'之类的特定元素方面，您应该研究诸如document.querySelector('.approve').classList.add('hide);之类的东西

还要就为什么insertAdjacentHTML无法正常工作的原因，将其发布到const'renderLoader'范围之外。

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

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

3 个答案: