CODEWITHSUNDEEP
javascript
Mr T
Mr T

Reputation: 75

How to create a previous/next button algorithm?

I am building a site with repetitive names for pages like this:

 thesame/thesame/1-1.html    
 thesame/thesame/1-2.html
 thesame/thesame/1-3.html

first number is the chapter number and the second is page number ,I need to insert a previous/next buttons, the next button add 1 to current href and redirect (if you are in page 1-1.html it add 1 so takes you to page 1-2.html and then 1-3.html) and a previous button subtract 1 from the current href. I tried the following but affects the first number (the chapter numper not page number):

 var p = (window.location.href.split('/')[window.location.href.split(‌​'/').length-1].split‌​('.')[0].split('-')[‌​0]*1)+1;

this is a demo

<!DOCTYPE html>
<html>
<body>
<p>Click the button to locate where in the string a specifed value  occurs.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var str = "http://192.168.1.3:33334/Preview/the-website/3-37.html";
var html = (str.split('/')[str.split('/').length-1].split('-')[0]*1)+1;
document.getElementById("demo").innerHTML = html;
}
</script>
</body>
</html>

any ideas?

Upvotes: 2

Views: 403

Answers (1)

Sid
Sid

Reputation: 511

Better to do like this:

<html>
<head>
<script>
function next(c){
    var maxp = 5; 
    var p = (window.location.href.split('/')[window.location.href.split('/').length-1].split('.')[0].split('-')[1]*1)+1; 
    window.location.href = (p > 0 && p <= maxp) ? c + '-' + p + '.html' : '#';
}
function prev(c){
    var maxp = 5; 
    var p = (window.location.href.split('/')[window.location.href.split('/').length-1].split('.')[0].split('-')[1]*1)-1; 
    window.location.href = (p > 0 && p <= maxp) ? c + '-' +p + '.html' : '#';
}
</script>
</head>
<body>
<a onclick="next(1)">next</a>
<a onclick="prev(1)">prev</a>
</body>
</html>

Pass the chapter number as argument of next and prev functions

If you do not like to use function call then use it: for next button:

<a onclick="javascript: var maxp = 5; var p = (window.location.href.split('/')[window.location.href.split('/').length-1].split('.')[0]*1)+1; window.location.href = (p > 0 && p <= maxp) ? '1-'+ p + '.html' : '#'">next</a>

for previous button:

<a onclick="javascript: var maxp = 5; var p = (window.location.href.split('/')[window.location.href.split('/').length-1].split('.')[0]*1)-1; window.location.href = (p > 0 && p <= maxp) ? '1-' + p + '.html' : '#'">prev</a>

here maxp is the last page index

Upvotes: 3

Related Questions