Populating html file with array of div's using JS

Question

I have a container including 16 div elements stacked on top of eachother. I want to limit the number of displayed div elements to 4 per page and show a pagination underneath the content. The pagination should populate itself with new numbers as the new div elements are being added in the html file in the future, but the number of shown elements per page should be limited to 4. I am trying to implement a pure Javascript solution, and this is what I tried so far:

The buttons in the HTML (I am not including the div elements, they are 16 like I said and carry the class name of ".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;

I try to show and hide elements using a css class with display: none property. Seems I am half way there, but still the elements are messed up when clicking on the buttons and they just disappear.

@Amberlamps I am stuck at the drawList() function and I cannot tackle the problem. The code sample is neatly shown together with the explanation of the problem. — anon
– anon, Commented Mar 8, 2017 at 20:11

rphv · Accepted Answer · 2017-03-08 20:34:58Z

Here's a minor modification of your code that might help you. The only real change is that the not-visible class needs to be added to all of the items in the pageList before the pageList is updated - this ensures that the old set is hidden before the next set is displayed.

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" />

Thank you! I was stuck into thinking inside the box (meaning only inside the .js file) and didn't realise that I could modify the html a bit to solve the problem!

Collectives™ on Stack Overflow

Populating html file with array of div's using JS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related