Спасибо за ответ!
Еще такой вопрос..
У меня есть список страниц, на каждой странице есть список постов, и мне надо добавить кнопку, которая перелистывает на след и предыдущую страницы, показывая содержимое выбранной страницы
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./style.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link rel="stylesheet" href="./choices.min.css">
<script defer src="./main.js"></script>
<script defer src="./choices.min.js"></script>
</head>
<body>
<header>
<div class="container">
<div class="header__block">
<nav class="header__nav">
<ul class="header__nav-list">
<li class="header__nav-item"><a class="header__nav-link" href=""> lorem</a></li>
<li class="header__nav-item"><a class="header__nav-link" href="">lorem</a></li>
<li class="header__nav-item"><a class="header__nav-link" href="">lorem</a></li>
<li class="header__nav-item"><a class="header__nav-link" href="">lorem</a></li>
<li class="header__nav-item"><a class="header__nav-link" href="">lorem</a></li>
</ul>
</nav>
</div>
</div>
</header>
<main>
<div class="container">
<h1>List of post</h1>
<div class="pagination">
<button href="" class="btn-pagination pagination-prev"></button>
<button href="" class="btn-pagination pagination-next"></button>
</div>
<select name="select" class="nav__list select" onchange="window.location.href=this.options[this.selectedIndex].value">
</select>
<div class="posts-list"></div>
</div>
</main>
<footer>
<div class="container">
<div class="footer__block">
<ul class="footer__social-list">
<li class="social-item">
<a class="social-item-link" href=""></a>
</li>
<li class="social-item">
<a class="social-item-link" href=""></a>
</li>
<li class="social-item">
<a class="social-item-link" href=""></a>
</li>
</ul>
</div>
</div>
</footer>
<script >
(async function() {
const postNav = document.querySelector('.nav__list');
const postPage = document.querySelector('.comments-container');
if (postNav) {
createPostsNav();
createPostsList();
}
if (postPage) {
createPostPage();
createPostComment();
}
async function createPostComment() {
const commentBlock = document.querySelector('.comments-block');
let postComment = '';
const pageParams = new URLSearchParams(location.search);
const postId = pageParams.get('id');
const response = await fetch(`http://gorest.co.in/public-api/comments?post_id=${postId}`);
const result = await response.json();
const comment = result.data;
comment.map(item => {
postComment = `
<div class="block-avatar"></div>
<div class="card-comment">
<div class="card-header">
<span class="span-from">From:</span>
${item.email}
</div>
<div class="card-body">
<h3 class="card-title">${item.name}</h3>
<p class="card-text">${item.body}</p>
</div>
</div>
`;
commentBlock.innerHTML = postComment;
});
}
async function getPostsData() {
const pageParams = new URLSearchParams(location.search);
const postPage = pageParams.get('page');
const response = await fetch(`http://gorest.co.in/public-api/posts?page=${postPage == null ? 1 : postPage}`);
const result = await response.json();
return {
posts: result.data,
pagination: result.meta.pagination,
};
}
async function createPostPage() {
const postPage = document.querySelector('.post-block');
let postContent = '';
const pageParams = new URLSearchParams(location.search);
const postId = pageParams.get('id');
const response = await fetch(`http://gorest.co.in/public-api/posts/${postId}`);
const result = await response.json();
const post = result.data;
postContent = `
<div class="card">
<div class="card-body">
<div class="card-img">
<p class="card-img-text">Image</p>
</div>
<h1 class="card-title">${post.title}</h1>
<p class="card-text">${post.body}</p>
</div>
</div>
`;
postPage.innerHTML = postContent;
}
// <a class="nav__link" href="">
// Page ${i}
// </a>
async function createPostsNav() {
const pagination = await getPostsData();
const postsNav = document.querySelector('.nav__list');
let postNav = '';
for (let i = 1; i <= pagination.pagination.pages; i++) {
postNav += `
<option value="index.html?page=${i}"> Page ${i}
</option>
`;
postsNav.innerHTML = postNav;
}
}
async function createPostsList() {
const posts = await getPostsData();
const postsList = document.querySelector('.posts-list');
let postItem = '';
for (let i = 0; i < posts.posts.length; i++) {
postItem += `
<div class="slide__blocks">
<div class="card-img">
<p class="card-img-text">Image</p>
</div>
<h3 class="slide__title">${posts.posts[i].title}</h3>
<p class="slide__body">${posts.posts[i].body}</p>
<a class=" btn-more" href="post.html?id=${posts.posts[i].id}">
Click for read
</a>
</div>
`;
postsList.innerHTML = postItem;
}
}
}());
</script>
</body>
</html>