undefined variable: rookie question

[Sharon]

Hi!
I have these three functions, the first one is called via an
onmousedown-event in a <td> in my xsl. The cell value and the rowname
are passed through, and on a right-click the second function is called
which creates a popup > a customized context menu in which I want to
build a filter function. Then again when one of the <td>'s in that
contextmenu is clicked, I want the third function to be activated.
This should be a function that retransforms my XML depending on the
selection made in the context menu: different selections like a
positive filter, a negative filter etc. should call different
appropriate XSL stylesheets. I haven't a clue how to go about that,
this is all new to me, but the first small step is already failing:
the contextmenu is displayed fine, but when I click the first option
in the contextmenu, renderData is activated but it says "Val is
undefined". Why is this? Passing the variables from the first to the
second function causes no problems, why won't it work for the second
and third function? Hope someone can help...thanks!

function cellClick()
{
var V=event.srcElement.href1.substring(0,(event.srcElement.href1.length-1));
var F=event.srcElement.href2.substring(0,(event.srcElement.href2.length-1));
{
if(event.button==2||event.button==3)
{
dopopup(V,F,event.x-1,event.y-1)};
}
}

function dopopup(Val,Field,x,y) {
alert(Val);
alert(Field);
var html='';
html+='<TABLE STYLE="border:1pt solid #808080" BGCOLOR="#CCCCCC"
WIDTH="140" HEIGHT="220" CELLPADDING="0" CELLSPACING="1">';
html+='<STYLE TYPE="text/css">\n';
html+='a:link {text-decoration:none;font-family:Arial;font-size:8pt;}\n';
html+='a:visited {text-decoration:none;font-family:Arial;font-size:8pt;}\n';
html+='td {font-size:8pt;}\n';
html+='<\/STYLE>\n';
html+='<SCRIPT LANGUAGE="JavaScript">\n';
html+='\n<!--\n';
html+='window.onerror=null;\n';
html+='/-->\n';
html+='<\/SCRIPT>\n';
html+='<TR><TD STYLE="border:1pt solid #CCCCCC"
ONMOUSEOVER="this.style.background=\'#CFD6E8\';this.style.border=\'1pt
solid
#737B92\';" ONMOUSEOUT="this.style.background=\'#CCCCCC\';this.style.border=\'1pt
solid #CCCCCC\';"
ONCLICK="renderData(Val,Field);">&nbsp;Filter op: '+ Val
+'</TD></TR>';

html+='<TR><TD STYLE="border:1pt solid #CCCCCC"
ONMOUSEOVER="this.style.background=\'#CFD6E8\';this.style.border=\'1pt
solid
#737B92\';" ONMOUSEOUT="this.style.background=\'#CCCCCC\';this.style.border=\'1pt
solid #CCCCCC\';">&nbsp;Filter op NIET: '+ Val +'</TD></TR>';

html+='<TR><TD STYLE="border:1pt solid #CCCCCC"><IMG
SRC="/lib/xtable/pixel.gif" WIDTH="130" HEIGHT="1"></TD></TR>';

html+='<TR><TD STYLE="border:1pt solid #CCCCCC"
ONMOUSEOVER="this.style.background=\'#CFD6E8\';this.style.border=\'1pt
solid
#737B92\';" ONMOUSEOUT="this.style.background=\'#CCCCCC\';this.style.border=\'1pt
solid #CCCCCC\';">&nbsp;Tralali</TD></TR>';

html+='<TR><TD STYLE="border:1pt solid #CCCCCC"
ONMOUSEOVER="this.style.background=\'#CFD6E8\';this.style.border=\'1pt
solid
#737B92\';" ONMOUSEOUT="this.style.background=\'#CCCCCC\';this.style.border=\'1pt
solid #CCCCCC\';">&nbsp;Tralala</TD></TR>';

html+='<TR><TD STYLE="border:1pt solid #CCCCCC"><IMG
SRC="/lib/xtable/pixel.gif" WIDTH="130" HEIGHT="1"></TD></TR>';

html+='<TR><TD STYLE="border:1pt solid #CCCCCC"
ONMOUSEOVER="this.style.background=\'#CFD6E8\';this.style.border=\'1pt
solid
#737B92\';" ONMOUSEOUT="this.style.background=\'#CCCCCC\';this.style.border=\'1pt
solid #CCCCCC\';">&nbsp;Tralali</TD></TR>';

html+='<TR><TD STYLE="border:1pt solid #CCCCCC"
ONMOUSEOVER="this.style.background=\'#CFD6E8\';this.style.border=\'1pt
solid
#737B92\';" ONMOUSEOUT="this.style.background=\'#CCCCCC\';this.style.border=\'1pt
solid #CCCCCC\';">&nbsp;Tralala</TD></TR>';

html+='<\/TABLE>';
var oPopupBody = oPopup.document.body;
oPopupBody.innerHTML = html;
oPopup.show(x, y, 140, 220, document.body);
}


function renderData(filterValue,filterField)
{
alert(filterValue);
alert(filterField);
}


Oh and something else: I would like to include all the style-rules of
the popup in my already existing stylesheet, to tidy the second
function up since this looks so messy...But I can't get that to work
either! Can't I do anything right? I know the stylesheet should be
linked in the head of a HTML document but there's no head there. Yet I
think it should somehow be possible, does anyone know if it is and how
to go about it? Hope you can help me improve my javascript skills!
(that shouldn't be too hard, though...) Please teach me. Sharon