-1

In an older post listed below it explained how to create a next button that clicked index to page2, then page3, then back to index as a loop. older post link

The code I found useful is:

var pageList = ["index.html", "01.html", "02.html"];
var url = window.location.pathname; // e.g. http://me.com/index.html
var page = url.substring(url.lastIndexOf('/')+1); // e.g. index.html
var currentPosition = pageList.indexOf(page); // e.g. 0, 1 or 2

document.getElementById('next-btn').onclick = function(){
    // if the URL is not in the list, do nothing
    if(currentPosition==-1) return;
    // if we're at the end, go back to index, else, go to next page
    window.location = currentPosition<pageList.length-1? pageList[++currentPosition]:pageList[0];
}

BUT, the "Previous" button code did not work, so I tried this:

document.getElementById('prev-btn').onclick = function(){
    if(currentPosition==-1) return;
    window.location = currentPosition<pageList.length-1? pageList[++currentPosition]:pageList[0];
}

I want to change that final code so it functions accurately so it clicks backward to each previous page 5-4-3-2-1 etc.

granite
  • 304
  • 4

2 Answers2

0

you need to select the previous element, so negate the 'currentPosition' using '--' rather than increment with '++'

window.location = currentPosition<pageList.length-1? pageList[--currentPosition]:pageList[0];
This Guy
  • 495
  • 4
  • 9
0

Well, my first post </> seemed like a viable JS code ... until I read another older post (over here) with a convenient method for the JS code. It merely needed the total # of pages in my folder set once (i.e. 1-to-5 pages or whatever it is), and its all done. This method skips API challenges (of pagination), uses merely static html pages, external JS, external JQ CDN, minor CSS, and done. Here are my results from that code (and it solved my needs).

var pageNamePattern = 'page'; // define the pattern of the html page name (http://www....../page1.html)
   var firstPage = 1, lastPage = 5; // initialize the starting and ending page

   $(function () {
       var next = GetNextPageNumber();
       var nexturl = pageNamePattern + next + '.html';
       var prev = GetPrevPageNumber();
       var prevurl = pageNamePattern + prev + '.html';
       //$('#next').click(function () { window.location =nexturl });
       //$('#prev').click(function () { window.location = prevurl });

       $('#next').attr('href', nexturl);
       $('#prev').attr('href', prevurl);
   });

   function GetCurrentPageNumber() {

       var path = window.location.pathname;
       var page = path.split("/").pop();
       page = page.replace(pageNamePattern, '').replace('.html', '').replace('#', '');
       return parseInt(page);
   }
   function GetNextPageNumber() {
       var current = GetCurrentPageNumber();
       current++;
       if (current > lastPage) 
    // if last page, don't increment the counter; either stay on same page or navigate to fist page.
           current = lastPage;
       return current;
   }
   function GetPrevPageNumber() {
       var current = GetCurrentPageNumber();
       current--;
       if (current < firstPage) 
    // if last page, don't increment the counter; either stay on same page or navigate to fist page.
           current = firstPage;
       return current;
   }
*,html,body {}
p {font-size: 1.1em;}
.next,
.previous
 {
  display:inline-block; 
  font-family: Verdana, Tahoma, Arial, sans-serif;
  font-size: 1.0em;
  font-weight:500;
  list-style: none;
  text-decoration: none;
  margin: 2px;
  padding: 15px 20px 15px 20px;
  border-radius: 5px;
  background: deepskyblue;
  color: #fff;
  border: 0;
  outline: none;
  cursor: pointer;
  width: 0 auto;
  width: 110px;
  vertical-align:middle; 
  overflow:hidden; 
  text-align:center;  
  white-space:nowrap;
  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<br>
<a href="#" id="prev" class="previous b-style">Previous</a>
<a href="#" id="next" class="next b-style">Next</a>
granite
  • 304
  • 4