时间戳

首页 > 解决方案 > 防止在每次点击时添加 DOM 元素

javascript - 防止在每次点击时添加 DOM 元素

问题描述

我有以下脚本，它获取具有给定类的 DOM 元素，并将它们添加到数组中。然后它循环遍历数组并将值添加到WordPress Gutenberg 中组件的option元素。SelectControl我能够将数组中的元素放入下拉列表中，但我收到以下错误：Uncaught TypeError: Cannot read property 'appendChild' of null在控制台中。选择时，它也不会在选择组件中显示所选选项，并且每次选择下拉列表中的选项时都会复制下拉列表中的数组选项。

我怀疑这可能是执行顺序问题，但不完全确定：

setTimeout(() => {
            let headers = [...document.querySelectorAll('.wp-block-heading')].map(item => item.innerText);
            const select = document.getElementById('selectheader');
            for (let i = 0; i < headers.length; i++) {
                let opt = headers[i];
                let el = document.createElement('option');
                el.textContent = opt;
                el.value = opt;
                select.appendChild(el);
            }
        }, 1000);


<SelectControl
    value={[headers]}
    id="selectheader"
    options={[headers]}
    onChange={setJumpLink}
/>

标签： javascriptarraysloopswordpress-gutenberg

解决方案

它实际上需要：

if (select && select.innerHTML) {
    select.innerHTML = '';
}

在循环之前。

推荐阅读