Pass variable with onclick

I have a book on my page consist of 3 iframes, 1 iframe opens the table of contents and 2 iframes to open开发者_Python百科 2 pages at the same time, also i have 2 buttons to navigate pages next and previous through this function

var pNum = 1;
var pNum2 = 2;
var maxPage = 108;
pNum = pNum+2;
pNum2 = pNum2+2;
if (pNum > maxPage) {pNum=1;pNum2=2;}
    document.getElementById("Frame_C").src="page"+pNum+".jpg";
    document.getElementById("Frame_B").src="page"+pNum2+".jpg";
}
function prev(){
    pNum = pNum-2;
    pNum2 = pNum2-2;
    if (pNum < 1) {pNum=107;pNum2=108;}
        document.getElementById("Frame_C").src="page"+pNum+".jpg";
        document.getElementById("Frame_B").src="page"+pNum2+".jpg";
} 

if I click on link in table of contents it open 2 pages with this link

<td>
 <p class=Mmenu>
  <a href="page36.jpg" target="Frame_C" onClick="window.open('page37.jpg','Frame_B')">whatever</a>
</td>

the problem starts here, if i click on next-previous button I want it to continue from page 36,37 but what happens it continue from pNum in the function, how to update the pNum from onclick ? or maybe another solution !!

You are encountering troubles because your "whatever" link is changing the state that your prev() function is expecting to be not-messed-with.

When one has some kind of state (e.g. some variables representing a book with pages), it is important to not violate the representation invariants or internal representation. Thus

Everything that touches the book should keep its internal state consistent.

A good way to code such that this is the case is to create a bunch of special interfacing functions that make sure the state is consistent (demonstrated below via a single function gotoPage which makes sure everything is kept tidy; one could use more than a single function, but they would each need to keep things tidy).

First one has to come up with the rules you want for the internal state. In the example below, the rule is "rightPage is always equal to leftPage+1, and the iframes always show leftPage.jpg and rightPage.jpg, except if it's an invalid page, in which case that iframe shows an about:blank".

Try this:

function $id(id) {
    return document.getElementById(id);
}

/*
    internal representation
    these values changed only by the gotoPage function
    invariant:
        - rightPage is always equal to leftPage+1
        - iframes always show leftPage.jpg and rightPage.jpg, 
          except if it's an invalid page, in which case that 
          iframe shows an about:blank
*/
var leftPage = 0; // page0 is blank
var rightPage = 1; // must always be equal to leftPage+1; which may be an invalid page
var PAGE_MAX = ???;
function gotoPage(num) {
    if (num<0)
        num = 0;
    if (num>PAGE_MAX)
        num = PAGE_MAX; // may need to think about this some more

    // most books seem to put even pages on left and odd on right
    function isEven(n) {
        return n%2==0; // sidenote: abs(n%2)==1 -> odd
    }
    leftPage = isEven(num) ? num : num-1;
    rightPage = leftPage+1;

    updateDisplay();
}

function prev() {
    gotoPage(leftPage-2);
}
function next() {
    gotoPage(leftPage+2);
}
function gotoPageByGuess(elem) {
    var pageNum = parseInt(elem.innerHTML.slice(-2));
    gotoPage(pageNum);
}

function updateDisplay() {
    // using jquery
    $id('leftPage').src = 'page'+leftPage+'.jpg';
    if (rightPage <= PAGE_MAX)
        $id('rightPage').src = 'page'+rightPage+'.jpg';
    else
        $id('rightPage').src = 'about:blank';            
}

Then don't use a regular href or target, but just do:

<a onclick="prev()">Previous</a>
<a onclick="next()">Next</a>

Then you can do either of these, depending on which is easiest:

<a onclick="gotoPage(26)">Chapter 2: Some Title......... p26</a>
<a onclick="gotoPageByGuess(this)">Chapter 2: Some Title......... p26</a>

edit: removed with(Math){...} statement, which allows you to use math functions like abs() without verbosely calling Math.abs()