Filling an html file with a div array using JS

Question

I have a container containing 16 div elements stacked on top of each other. I want to limit the number of div elements displayed to 4 per page and show a subcategory below the content. Pagination should fill itself with new numbers, as new div elements are added to the html file in the future, but the number of displayed elements on the page should be limited to 4. I am trying to implement a pure Javascript solution, and this is what I have tried so far:

Buttons in HTML (I do not include div elements, they are 16, as I said, and carry the class name ".events-section__main-event"):

<input type="button" id="first" onclick="firstPage()" value="first" />
<input type="button" id="next" onclick="nextPage()" value="next" />
<input type="button" id="previous" onclick="previousPage()" value="previous" />
<input type="button" id="last" onclick="lastPage()" value="last" />

JS:

var pageList = new Array();
var currentPage = 1;
var numberPerPage = 4;
var numberOfPages = 0;
var events = Array.prototype.slice.call(document.querySelectorAll(".events-section__main-event"));

function getNumberOfPages() {
    return Math.ceil(events.length / numberPerPage);
}

function nextPage() {
    currentPage += 1;
    loadList();
}

function previousPage() {
    currentPage -= 1;
    loadList();
}

function firstPage() {
    currentPage = 1;
    loadList();
}

function lastPage() {
    currentPage = numberOfPages;
    loadList();
}

function loadList() {
    var begin = ((currentPage - 1) * numberPerPage);
    var end = begin + numberPerPage;

    pageList = events.slice(begin, end);
    drawList();
    check();
}

function drawList() {
    for (i = 0; i < pageList.length; i++) {
        pageList[i].classList.remove("events-section__main-event");
        pageList[i].classList.add("not-visible");
    }
}

function check() {
    document.getElementById("next").disabled = currentPage == numberOfPages ? true : false;
    document.getElementById("previous").disabled = currentPage == 1 ? true : false;
    document.getElementById("first").disabled = currentPage == 1 ? true : false;
    document.getElementById("last").disabled = currentPage == numberOfPages ? true : false;
}

function load() {
    loadList();
}

window.onload = load;

, css : none property. , , , .

Answer 1

, . , not-visible pageList pageList - , .

var pageList = new Array();
var currentPage = 1;
var numberPerPage = 4;

var events = Array.prototype.slice.call(document.querySelectorAll(".events-section__main-event"));

function getNumberOfPages() {
  return Math.ceil(events.length / numberPerPage);
}

function nextPage() {
  currentPage += 1;
  loadList();
}

function previousPage() {
  currentPage -= 1;
  loadList();
}

function firstPage() {
  currentPage = 1;
  loadList();
}

function lastPage() {
  currentPage = numberOfPages;
  loadList();
}

function loadList() {
  var begin = ((currentPage - 1) * numberPerPage);
  var end = begin + numberPerPage;
  for (i = 0; i < pageList.length; i++) {
    pageList[i].classList.add("not-visible"); // make the old list invisible
  }
  pageList = events.slice(begin, end);
  drawList();
  check();
}

function drawList() {
  for (i = 0; i < pageList.length; i++) {
    pageList[i].classList.remove("not-visible");
  }
}

function check() {
  document.getElementById("next").disabled = currentPage == numberOfPages ? true : false;
  document.getElementById("previous").disabled = currentPage == 1 ? true : false;
  document.getElementById("first").disabled = currentPage == 1 ? true : false;
  document.getElementById("last").disabled = currentPage == numberOfPages ? true : false;
}

function load() {
  loadList();
}

var numberOfPages = getNumberOfPages();
window.onload = load;

.events-section__main-event {
  height: 25px;
  width: 50px;
  border: 1px black solid;
}

.not-visible {
  display: none;
}

<div id="1" class="events-section__main-event">1</div>
<div id="2" class="events-section__main-event">2</div>
<div id="3" class="events-section__main-event">3</div>
<div id="4" class="events-section__main-event">4</div>
<div id="5" class="events-section__main-event not-visible">5</div>
<div id="6" class="events-section__main-event not-visible">6</div>
<div id="7" class="events-section__main-event not-visible">7</div>
<div id="8" class="events-section__main-event not-visible">8</div>
<div id="9" class="events-section__main-event not-visible">9</div>
<div id="10" class="events-section__main-event not-visible">10</div>
<div id="11" class="events-section__main-event not-visible">11</div>
<div id="12" class="events-section__main-event not-visible">12</div>
<div id="13" class="events-section__main-event not-visible">13</div>
<div id="14" class="events-section__main-event not-visible">14</div>
<div id="15" class="events-section__main-event not-visible">15</div>
<div id="16" class="events-section__main-event not-visible">16</div>

<input type="button" id="first" onclick="firstPage()" value="first" />
<input type="button" id="next" onclick="nextPage()" value="next" />
<input type="button" id="previous" onclick="previousPage()" value="previous" />
<input type="button" id="last" onclick="lastPage()" value="last" />