@boul

Как исправить ошибки в скрипте кнопки «Показать еще»?

Друзья, всем привет!
Прошу помощи от знатоков, ибо второй день не могу понять причину ошибок и в принципе неработы кода.
Если подробнее, то начну с вылезающей ошибки, сейчас браузер ругается на то, что не удается прочитать свойства null (чтение 'append') не могу понять куда искать:

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'append')

А теперь по порядку:
- сайт делаю на WP,
- карточки вывожу через ACF,
- для эксперимента в настройках CMS (настройки->чтение) ограничил показ не более 2-х записей (всего их 12шт), пагинация срабатывает правильно.
Сам скрипт кнопки:
// все начальные переменные
let postContainer = document.querySelector('.posts-wrapper'),
    loadMore_btn = document.querySelector('#load_more_posts'),
    totalPages = document.querySelector('.load-more').getAttribute('data-totalpages'),
    currentPage = 1,
    url = document.location.href,
    fetchUrl = url.match(/[?]/) ? url + '&paged=' : url + '?paged=',//проверка структуры постоянных ссылок
    parser = new DOMParser();//анализатор DOM

    console.log(totalPages, url)

if( currentPage == totalPages ) {

    //запустить, если есть только 1 страница
    loadMore_btn.classList.add('end-page')
    loadMore_btn.disabled = true
    loadMore_btn.innerHTML = 'No more posts'

}else if( currentPage < totalPages ){

    //выполнить, если имеется более 1 страницы
    loadMore_btn.disabled = false

    //прослушиватель событий для кнопки "загрузить больше"
    loadMore_btn.addEventListener( 'click', loadMorePosts )

}

/**
 * @callback loadMorePosts
 * асинхронная функция для функции выборки с ожиданием
 */
async function loadMorePosts(){

    //увеличиваю номер страницы для каждого клика
    currentPage++

    //изменение текста кнопки во время загрузки
    this.innerHTML = 'Сейчас поищу...'

    //функция выборки и возвращаемые данные
    let data = await ( await fetch( fetchUrl + currentPage ).catch( errorHandle ) ).text(),

        //DOMParser для преобразования текстовой строки в узлы HTML
        htmlData = parser.parseFromString( data, 'text/html' ),

        //записи, которые будут добавлены
        posts = htmlData.querySelectorAll('.change-img')

    for( let i = 0; i<posts.length; i++ ){

        //первоначально добавляю класс "скрыть" к сообщениям для эффекта затухания
        posts[i].classList.add('hide')

        //затем добавляю его в контейнер
        postContainer.append( posts[i] )
    }

    /*********** fadein effect ***********/
    //выбераю все скрытые записи
    let hiddenPosts = postContainer.querySelectorAll('.hide'),

        //тайм-аут и видимые сообщения
        // переход css исчезнет в
        timer = setTimeout( function(){
            Array.prototype.map.call( hiddenPosts, function(el){
                el.classList.remove('hide')
                el.classList.add('show')
            })
        }, 300)
    /*********** fadein effect ends ***********/

    if( currentPage == totalPages ){

    //если больше нет страницы,
    //отключаю кнопку
        this.classList.add('end-page')
        this.disabled = true
        this.innerHTML = 'Загружены все карточки'

    }else{

        //если страниц больше,
        //текст кнопки
        this.innerHTML = 'Загрузить еще'
    }
    
}

/**
 * @callback errorHandle
 * @param err to handle errors //для обработки ошибок
 */
function errorHandle(err){
    console.warn(err)
}

Файл вывода всех записей:
<div class="row">
		<div class="col md 12">
			<div class="rotate-block">

				<?php
				// Произвольное поле по которому будет сортировка
				$the_key = 'Date';
				$args = array(
					'meta_key' => $the_key,
					// Сортируем по значению цифры в произвольном поле
					'orderby' => 'meta_value_num',
					// Сортируем от большего к меньшему
					'order' => 'DESC',
					// Исключаем категории
					'cat' => ''
				);
				global $wp_query;
				query_posts(
					array_merge(
						$wp_query->query,
						$args
					)
				);
				?>


				<?php if (have_posts()) : ?>
					<?php
					while (have_posts()) :
						the_post();
						get_template_part('template-parts/content-cards', 'cards');
					endwhile;
				?>


					<?php
					//ссылки на страницы WordPress по умолчанию пагинация
					// echo paginate_links();

					//загрузить дополнительную кнопку для JS fetch API
					printf(
						'<div class="load-more" data-totalpages="%s"><button id="load_more_posts">%s</button></div>',
						esc_attr($wp_query->max_num_pages),
						esc_html__('Загрузить еще', 'text-doamin')
					);
					?>
					<?php
					the_posts_pagination(array(
					/* 'show_all'     => false, // показаны все страницы участвующие в пагинации
						'end_size'     => 2,     // количество страниц на концах
						'mid_size'     => 2,     // количество страниц вокруг текущей
						'prev_text'          => '',
						'next_text'          => '',
						'before_page_number' => false,
						'type' => 'list', ));*/
					?>


				<?php		// Если нет карточек контента, шаблон "Сообщения не найдены".
				else :
					get_template_part('template-parts/content-cards', 'none');
				?>
				<?php endif; ?>


			</div>
		</div>
	</div>

Ну и файл самой карточки (не знаю поможет ли разобраться):
<div class="change-img">
    <div class="front-side-img">
        <img src="<?php the_field('Image'); ?>" alt="<?php the_field('alt_img'); ?>">

    </div>
    <div class="back-side-img">
        <div class="back-side__info">
            <h3 class="back-side__title">г.
                <span class="back-side__span">
                    <?php the_field('Sity'); ?>
                </span>
            </h3>

            <span class="back-side__aderss">адрес:
                <span class="back-side__span">
                    <?php the_field('Address'); ?>
                </span>
            </span>


            <span class="back-side__data">дата:
                <span class="back-side__span">
                    <?php the_field('Date'); ?>
                </span>
            </span>

            <span class="back-side__prise"> стоимость участия:
                <span class="back-side__span">
                    <?php the_field('Cost_of_participation'); ?> руб.
                </span>
            </span>

            <?php if (get_field('filsave')) : ?>
                <a href=" <?php the_field('filsave'); ?>" target="_blank" class="back-side__polojenie"><?php the_field('my_link'); ?></a>
            <?php endif; ?>
            <a href="<?php the_field('polelinks'); ?>" target="_blank" class=" btn-primary btn-outline btn-merop"><?php the_field('namelink'); ?></a>
        </div>
    </div>
</div>

Подскажите плизз, если возможно, где я ошибся?
Что поправить?
Спасибо.
  • Вопрос задан
  • 71 просмотр
Решения вопроса 1
v3shin
@v3shin
Веб-шаман
Ошибка: вы пытаетесь вызвать метод append() у объекта типа null. У кого вы вызываете append()? У postContainer. Значит, на момент этого вызова postContainer равен null. Логично? Логично. А теперь проверяйте, почему он на момент вызова равен null.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы