Increment href value by one (Javascript) - php

Question

I have got a ordered list
<li id="prev">
<a href="#fragment-1>Next</a>
</li>
I want to increment the href value to
<a href="#fragment-1">...
<a href="#fragment-2">...
<a href="#fragment-3">...
<a href="#fragment-4">...
When the next is clicked it should stop from 4 and return to 1 allso is it possible with javascript at all
Thank you

Answer 1

Give your link an id first to make it easier to select.
Then,
document.getElementById('the_id_here').addEventListener('click', function(e) {
var n = e.target.href.split('-')[1] * 1 + 1;
if (n > 4)
n = 1;
e.target.href = e.target.href.split('-')[0] + '-' + n;
}, false);
Example: http://jsbin.com/ajegaf/4#fragment-1

Answer 2

Not exactly what you want but should be close enough to aim you in the right direction, check http://jsfiddle.net/pj28v/
<ul id="list"></ul>
Next​
$(function() {
var $list = $('#list'),
count = 4,
i = 0,
cur = 0;
for (; i < count; i++) {
$list.append('<li>frag' + i + '</li>');
}
$('a', $list).eq(0).css('color','red');
$('#next').click(function(ev) {
ev.preventDefault();
cur++;
if (cur >= count) cur = 0;
$('a', $list).css('color','blue').eq(cur).css('color','red');
});
});​

Answer 3

A jQuery solution:
$(document).ready(function(){
$('#prev a').click(function(){
var href = $(this).attr('href');
var num = parseInt(href.substr(href.indexOf('-') + 1));
if(num == 4)
{
num = 1;
}
else
{
num++;
}
$(this).attr('href', '#fragment-' + num)
});
});​
http://jsfiddle.net/UYDdB/

Answer 4

A solution similar to Delan's one but with jQuery and without the usage of a test. http://jsfiddle.net/GZ26j/
$('#next').on('click', function(e) {
e.preventDefault();
href = $(this).attr('href');
var n = href.split('-')[1] * 1 + 1;
n = n%5;
e.target.href = href.split('-')[0] + '-' + n;
});​
Edit:
This solution makes the counter start at 0 and not 1

Answer 5

use a hidden field to hold the value, and an onclick function to increase it and submit the form. SEE: How can I increase a number by activating a button to be able to access a function each time the button is increased?
<?
if(!isset($_GET['count'])) {
$count = 0;
} else {
$count = $_GET['count'];
}
?>
<script type='text/javascript'>
function submitForm(x) {
if(x == 'prev') {
document.getElementById('count').value--;
} else {
document.getElementById('count').value++;
}
document.forms["form"].submit();
}
</script>
<form action='hidfield.php' method='get' name='form'>
<input type='hidden' name='count' id='count' value='<?php echo $count; ?>'>
</form>
<input type='submit' name='prev' value='prev' onclick="submitForm('prev')">
<input type='submit' name='next' value='next' onclick="submitForm('next')">