Функция вызова из класса OnClick ⇐ Javascript

[Anonymous]

У меня есть этот сценарий страниц. Он работает нормально, за исключением того, что функции onclick внутри harderpagination () не определены.
Я также попробовал с этим. Handlepagination () Но это не имело никакого значения. addEventListener () < /code>? < /p>

Код: Выделить всё

const pagination = document.querySelectorAll('.pagination-block');

class Pagination {
constructor(pagination) {
this.pagination = pagination;
this.ul = this.pagination.querySelector('.pagination > ul');
this.items = this.pagination.querySelectorAll('.post');
this.handlePagination(6, 1);
}

generatePageNumber(totalPages, currentPage) {
let pagination = [],
pageNo = 1;

while (pageNo = prevRange && index < currentRange;
item.classList.toggle('show', isPageWithinRange);
})
}

handlePagination(postPerPage, currentPage) {
/**
* @param postPerPage int Numbers of items to show at the time.
* @param currentPage int Page number to start on.
*/
this.updateCurrentPage(postPerPage, currentPage);
const totalPages = Math.ceil(this.items.length / postPerPage);
let pageNumbers = this.generatePageNumber(totalPages, currentPage);

this.ul.innerHTML = '';
let li = '';
li += `[*]<`;
for (let pageNumber of pageNumbers) {
li += `[*]${pageNumber}`;
}
li += `[*]= totalPages ? 'hidden' : ''}" onclick="handlePagination(${postPerPage}, ${currentPage + 1})">>`;
this.ul.innerHTML = li;
}
}

Array.from(pagination).forEach((paginate) =>  {
const paginationEl = new Pagination(paginate);
});< /code>
* {
box-sizing: border-box;
}

.body {
display: flex;
flex-direction: column;
justify-content: space-between;
}

.posts {
list-style: none;
display: grid;
grid-template-columns: auto auto auto;
gap: 1rem;
}

.post {
display: none;
}

.post.show {
display: block;
}

.post h2 {
margin: 1rem 0 .5rem;
}

.thumbnail {
width: 23rem;
height: 11.5rem;
background-color: #efefef;
border-radius: 1rem;
cursor: pointer;
}

.pagination {
background-color: #111;
border-radius: .3rem;
}

.pagination ul {
list-style: none;
display: flex;
justify-content: center;
gap: .2rem;
}

.page-item {
color: #fff;
width: 3rem;
height: 3rem;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
user-select: none;
cursor: pointer;
}

.page-item .icon {
display: inline-block;
}

.page-item:hover {
background-color: #444;
}

.page-item.active {
background-color: #444;
}

.page-item.hidden {
display: none;
}< /code>

[list]
[*]

Title of post 1
1.2M. views

[*]

Title of post 2
500 views

[*]

Title of post 3
1500 views

[*]

Title of post 4
10.000 views

[*]

Title of post 5
500 views

[*]

Title of post 6
1M. views

[*]

Title of post 7
1.2M. views

[*]

Title of post 8
500 views

[*]

Title of post 9
1500 views

[*]

Title of post 10
10.000 views

[*]

Title of post 11
500 views

[*]

Title of post 12
1M. views

[*]

Title of post 13
1.2M.  views

[*]

Title of post 14
500 views

[*]

Title of post 15
1500 views

[*]

Title of post 16
10.000 views

[*]

Title of post 17
500 views

[*]

Title of post 18
1M. views

[*]

Title of post 19
1.2M. views

[*]

Title of post 20
300 views

[*]

Title of post 21
100 views

[*]

Title of post 22
10.000 views

[*]

Title of post 23
767 views

[*]

Title of post 24
1M. views

[*]

Title of post 25
12 views

[*]

Title of post 26
1M. views

[/list]


[list]
[*]<
[*]1
[*]...
[*]2
[*]3
[*]4
[*]...
[*]5
[*]>
[/list]

Подробнее здесь: https://stackoverflow.com/questions/796 ... ss-onclick