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

About the author

Hey, I'm Tania, a software engineer, writer, and open-source creator. I publish guides and tutorials about modern JavaScript, design, and programming.

Join newsletterBuy me a coffee