Как исправить ошибку?

Question

[AbaiS]

Код выдает ошибку, хотя раньше всё работало. Помогите исправить ошибку.

const tabs = (headerSelector, tabSelector, contentSelector, activeClass, display = "flex") => {
    const header = document.querySelector(headerSelector),
          tab = document.querySelectorAll(tabSelector),
          content = document.querySelectorAll(contentSelector);

    function hideTabContent() {
        content.forEach(item => {
            item.style.display = 'none';
        });

        tab.forEach(item => {
            item.classList.remove(activeClass);
        });
    }

    function showTabContent(i = 0) {
        content[i].style.display = display;  = ошибку выдаёт эта строка
        tab[i].classList.add(activeClass);
    }

    hideTabContent();
    showTabContent();

    header.addEventListener('click', (e) => {
        const target = e.target;
        if (target && 
            (target.classList.contains(tabSelector.replace(/\./, '')) ||
        target.parentNode.classList.contains(tabSelector.replace(/\./, '')))) {
            tab.forEach((item, i) => {
                if (target == item || target.parentNode == item) {
                    hideTabContent();
                    showTabContent(i);
                }
            });
        }
    });
};

export default tabs;

Оказалось проблема не в этом

Comments

[Сергей delphinpro]

какую ошибку?

[AbaiS]

Сергей delphinpro,

Uncaught TypeError: Cannot read properties of undefined (reading 'style')
    at showTabContent (tabs.js:17:20)
    at tabs (tabs.js:22:5)

[Сергей delphinpro]

AbaiS, в content у вас нет массива данных.
Значит document.querySelectorAll(contentSelector); вернул пустоту
Значит такого селектора на странице нет.

[AbaiS]

Сергей delphinpro, Оказалось проблема совсем в другом, но спасибо за помощь.

[Сергей delphinpro]

AbaiS, в каком другом?

Answer 1

[Александр]

content[i] равняется undefined, поэтому получить какие-либо его свойства не выйдет - это то же самое, что и undefined.style.display.

чтобы избежать подобного рода ошибок, вы можете добавить функцию для проверки:

const checkContent = i => content[i] !== undefined;

function showTabContent(i = 0) {
    if (checkContent(i)) {
        content[i].style.display = display;
        tab[i].classList.add(activeClass);
    } else {
        // сделать что-нибудь, в случае, если content[i] === undefined
    }
}

Comments

[AbaiS]

Оказалось проблема совсем в другом, но спасибо за помощь.