How to Paginate an Array in JavaScript

I wanted to take an array of URLs in JavaScript and be able to paginate to the correct one by clicking on the previous and next buttons.

Here's the HTML code.

Copy

<button id="behind"></button> <button id="forward"></button>

And the JavaScript, modified from an answer on this StackOverflow post.

Copy

var host = 'https://' + document.location.hostname
var pages = [host + '/index.html', host + '/index2.html', host + '/index3.html']

var behind = document.getElementById('behind')
var forward = document.getElementById('forward')

function prev(current, pages) {
  var index = pages.indexOf(current)
  if (index === 0) {
    return pages[pages.length - 1]
  }
  return pages[index - 1]
}

function next(current, pages) {
  var index = pages.indexOf(current)
  if (index === pages.length - 1) {
    return pages[0]
  }
  return pages[index + 1]
}

behind.addEventListener('click', function () {
  var newUrl = prev(host + window.location.pathname, pages)
  window.location.href = newUrl
})

forward.addEventListener('click', function () {
  var newUrl = next(host + window.location.pathname, pages)
  window.location.href = newUrl
})

Comments