Javascript function call not behaving the way I expect.

Question

here is the html:

<table width="100%" height="100%"  border="0" cellpadding="0" cellspacing="0">
    <tr align="center" valign="middle">
      <td width="10" class="pagestyle" onClick="pageNo(-1);" align="right">&laquo;</td>
      <td id="pageNum" class="pagestyle">1/5</td>
      <td width="10" class="pagestyle" onClick="pageNo(+1);" align="left">&raquo;</td>
    </tr>
</table>

And here is the corrosponding javascript:

var page = 0;
function pageNo(off) {
    if (((page + off) > -1) && ((page + off) < 6)) {
     page = page + off;
     parseRSS(page);
    } else if ((page + off) === 6) {
     page = 0;
     parseRSS(page);
    } else if ((page + off) === -1) {
     page = 5;
     parseRSS(page);
    }
}

What this is supposed to do is start with page 1, which it does, and count up or down depending on the link clicked. However, when we get to page 5, I have to click twice to go back to page 1. What is causing the double-click behavior?

Answer 1

Putting this code in firebug and running it ...

var page = 5;
function pageNo(off) {
    if (((page + off) > -1) && ((page + off) < 6)) {
        page = page + off;
    } else if ((page + off) === 6) {
        page = 0;
    } else if ((page + off) === -1) {
        page = 5;
    }
}
pageNo(+1);
alert(page);

alerts 0. Which is correct. You are setting page to 0 from page 5. Not 1.

Answer 2

What is total number of pages? Are you enumerate them from one to six or from zero to five?

Change your js function accordingly and simplify the js expression (mentioned you have pages from zero to five):

var page = 0;
var number_of_pages = 6;
function pageNo(off) {
     page = (page + off + number_of_pages) % number_of_pages;   
}

Answer 3

Is the answer as simple as the fact that your javascript code is indexed from zero, but your rss pages are indexed from one?

In other words, you're treating your javascript code as though you have 6 pages (0 to 5 inclusive) & you've only actually got 5 pages of RSS? So when you're on the 5th page (page=4 in your javascript) and you click next, it takes you to the 6th page (page=5), but if your parseRSS function ignores this request or throws an error since it doesn't have a 6th page of data, it appears to do nothing. From there, obviously, clicking again will loop you back to page 1 (page=0).

Answer 4

For a start, I'd use the simplified form:

var page = 0;
function pageNo(off) {
    page = (page + 6 + off) % 6;
    parseRSS(page);
}

And you have to click twice to get back to page 1 (5 -> 0 -> 1). You probably need (assuming as you seem to indicate that your page range is 1 through 5 inclusive):

var page = 1;
function pageNo(off) {
    var numpages = 5;
    page = (page - 1 + numpages + off) % numpages + 1;
    parseRSS(page);
}

This translates the range (1,5) to (0,4) before adding the value (and the wrap value which is a way to avoid calculating modulus on a negative value - some languages have trouble with that), then adding the offset and wrapping, then adding 1 again to get back in the range (1,5).