I want to implement pagination with JS that relies on counting elements of the same class and then changing their style property to show/hide elements on a page.
<style>
.block{
display: none;
}
</style>
<div class='block'>
<h1>BLOCK1</h1>
</div>
<div class='block'>
<h1>BLOCK2</h1>
</div>
<div class='block'>
<h1>BLOCK3</h1>
</div>
<div class='block'>
<h1>BLOCK4</h1>
</div>
<div class='block'>
<h1>BLOCK5</h1>
</div>
<script>
let num_elements = document.getElementsByClassName("block").length;
console.log(num_elements);
let current_page = 0;
let num_page_items = 2;
let num_pages = num_elements/num_page_items;
console.log(num_pages)
function next_two(){
for (let i = 0; i < num_page_items; i++) {
document.getElementsByClassName("block")[i].style.display='block';
} // how to show the next two?
}
function previous_two(){// cant figure out}
next_two();
</script>
Right now I have a bunch of divs of class block that have their CSS display property set to none. I then have a JS that gets the number of elements of class block,calculates number of pages, and a next_two() function that shows two elements on the page by changing CSS display property to block. How can I show the next 'page' (two items) and the previous 'page'?
you need to save the current page number, change it when you press next or previous and then run over the list and enable the items which are in that page. (take into account that this isnt the best way to do pagination and there are many js libraries that enable it - one example: https://pagination.js.org/)
any how the solution for the question that you defined:
<html>
<head>
<style>
.pageBlock {}
.showPage {
display: block;
}
.dontShowPage {
display: none;
}
</style>
<script>
var blockElements;
var num_elements;
var current_page;
var num_page_items;
var num_pages;
window.onload = init;
function init() {
blockElements = document.getElementsByClassName("pageBlock")
num_elements = blockElements.length;
console.log(num_elements);
current_page = 0;
num_page_items = 2;
num_pages = Math.floor( num_elements/ num_page_items);
console.log(num_pages);
}
function next_two() {
console.log('next two');
current_page++
if (current_page > num_pages) {
current_page = num_pages;
}
updatePageElements();
}
function previous_two() {
console.log('prev two');
current_page--
if (current_page < 0) {
current_page = 0;
}
updatePageElements();
}
function updatePageElements() {
for (let i = 0; i < num_elements; i++) {
//you can use the value of i itself but then you dont controll the order directlly
if ( Number.parseInt(blockElements[i].id) < num_page_items * current_page || Number.parseInt(blockElements[i].id) >= num_page_items * (current_page + 1)) {
blockElements[i].classList.replace('showPage', 'dontShowPage');
}
else {
blockElements[i].classList.replace('dontShowPage', 'showPage');
}
}
}
</script>
</head>
<body>
<div id="0" class="pageBlock showPage">
<h1>BLOCK1</h1>
</div>
<div id="1" class="pageBlock showPage">
<h1>BLOCK2</h1>
</div>
<div id="2" class="pageBlock dontShowPage">
<h1>BLOCK3</h1>
</div>
<div id="3" class="pageBlock dontShowPage">
<h1>BLOCK4</h1>
</div>
<div id="4" class="pageBlock dontShowPage">
<h1>BLOCK5</h1>
</div>
<button onclick="next_two()">next_two</button>
<button onclick="previous_two()">previous_two</button>
</body>
</html>