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.

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

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

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
})

Join the newsletter

I write about JavaScript, programming, and front-end design. Join 6000+ other developers in keeping up with my content. Unsubscribe whenever. Never any spam, ads, or affiliate links.