при нажатии на див не обрабатываеться
  <main class="chapters">
        <div class="chapters__character chapters_character__first" 
         data-page="page2" 
         data-loader-top="Загрузка Страницы 2" 
         data-loader-bottom="Подготовка данных...."
         tabindex="0" 
         role="button">
          <div class="chapters__caption">
            <div class="chapters__caption-wrapper">
              <div class="chapters__caption_block">
                <div class="chapters__caption_lock">
                  <img src="./lock.svg" class="chapters__caption_lock_icon" />
                </div>
              </div>
              <p class="chapters__caption_text">生活有了一个糟糕的开端</p>
            </div>
          </div>
        </div>
// main.js
document.addEventListener('DOMContentLoaded', () => {
    const loader = document.getElementById('loader');
    const loaderTextTop = document.getElementById('loader-text-top');
    const loaderTextBottom = document.getElementById('loader-text-bottom');
    const content = document.getElementById('content');

    // Выбираем все элементы с атрибутом data-page
    const interactiveElements = document.querySelectorAll('[data-page]');

    let currentPageStyles = null; // Ссылка на текущий CSS файл

    // Функция для отображения загрузочного экрана с текстами
    function showLoader(textTop, textBottom) {
        loaderTextTop.textContent = textTop || '';
        loaderTextBottom.textContent = textBottom || '';
        loader.style.display = 'flex';
    }

    // Функция для скрытия загрузочного экрана
    function hideLoader() {
        loader.style.display = 'none';
    }

    // Функция для динамической загрузки скрипта с возвратом Promise
    function loadScript(page) {
        return new Promise((resolve, reject) => {
            // Удаляем предыдущий скрипт, если он существует
            const existingScript = document.getElementById('page-script');
            if (existingScript) {
                existingScript.remove();
            }

            // Создаем новый скрипт
            const script = document.createElement('script');
            script.src = `${page}.js`;
            script.id = 'page-script';

            // Обработчик загрузки скрипта
            script.onload = () => {
                resolve();
            };

            // Обработчик ошибок загрузки
            script.onerror = () => {
                reject(new Error(`Ошибка загрузки скрипта: ${page}.js`));
            };

            // Добавляем скрипт в документ
            document.body.appendChild(script);
        });
    }

    // Функция для динамической загрузки CSS файла
    function loadStylesheet(page) {
        return new Promise((resolve, reject) => {
            // Удаляем предыдущий CSS файл, если он существует
            if (currentPageStyles) {
                currentPageStyles.remove();
                currentPageStyles = null;
            }

            // Создаем новый link элемент для CSS
            const link = document.createElement('link');
            link.rel = 'stylesheet';
            link.href = `${page}.css`;
            link.id = `${page}-css`;

            // Обработчик загрузки CSS
            link.onload = () => {
                resolve();
            };

            // Обработчик ошибок загрузки CSS
            link.onerror = () => {
                reject(new Error(`Ошибка загрузки CSS файла: ${page}.css`));
            };

            // Добавляем CSS в head
            document.head.appendChild(link);
            currentPageStyles = link;
        });
    }

    // Функция-обработчик клика
    async function handleElementClick(event) {
        const element = event.currentTarget;
        const page = element.getAttribute('data-page');
        const loaderTop = element.getAttribute('data-loader-top');
        const loaderBottom = element.getAttribute('data-loader-bottom');

        try {
            // Отображаем загрузочный экран с переданными текстами
            showLoader(loaderTop, loaderBottom);

            // Загрузить CSS для страницы
            await loadStylesheet(page);

            // Загрузить JS для страницы
            await loadScript(page);

            // Предполагаем, что загруженный скрипт включает функцию для рендеринга
            if (typeof renderPage === 'function') {
                await renderPage(); // Ждём выполнения рендеринга
            }

            hideLoader();
        } catch (error) {
            hideLoader();
            content.innerHTML = `<p>${error.message}</p>`;
            console.error(error);
        }
    }

    // Назначаем обработчики событий на все интерактивные элементы
    interactiveElements.forEach(element => {
        element.addEventListener('click', handleElementClick);

        // Если элемент не является кнопкой, добавляем обработку клавиатурных событий для доступности
        if (element.tagName.toLowerCase() !== 'button') {
            // Обработка нажатия клавиши Enter
            element.addEventListener('keypress', (event) => {
                if (event.key === 'Enter') {
                    handleElementClick(event);
                }
            });
        }
    });
});