PDA

View Full Version : Help with understanding code please.



Treeze
07-22-2011, 10:21 AM
Hi
We are currently re-working a client's website and as I am not a javascript programmer I am having trouble understanding some of the code, and need help understanding why a certain variable in the code remains undefined. The javascript function is called from the web page in this fashion:


<select name="cboL1_3" onchange="CheckLine(this);">
<option value=""></option>
<option value="l">L</option>
<option value="m">M</option>
</select>

and the function CheckLine is defined thus:

function CheckLine(el)
{
var Mok = false, Lok = false, val, currEl;
var LineNo = el.name;
LineNo = LineNo.substring(4,(LineNo.length - 2));
val = el.options[el.selectedIndex].value;
alert(el);
alert(val);
if (val == 'm')
{
Mok = true;
}
if (val == 'l')
{
Lok = true;
}
for (var i = 1; i<=4; i++)
{
currEl = document.frmDisc.elements['cboL' + LineNo + '_' + i];
if (currEl.name != el.name)
{
if (currEl.options[currEl.selectedIndex].value == 'm')
{
if (Mok)
{
currEl.selectedIndex = 0; //resets selection to blank if >1 M
}
Mok = true;
}
if (currEl.options[currEl.selectedIndex].value == 'l')
{
if (Lok)
{
currEl.selectedIndex = 0;//resets selection to blank if >1 L
}
Lok = true;
}
}

}
}

What is happening is that the user is filling in 24 lines of 4 select boxes, in which there must be 1 and only one "m" and 1 and only 1 "l". The code changes the value of the box back to blank if the user has tried to enter >1 of either. The code then should check the line number and count the number of lines, but on debugging I see that the value of variables el and LineNo are undefined. I can't understand why when the function is called, the value "this" is used. i.e CheckLine(this) - this appears to have no value in the html code as far as I can see! Perhaps someone could shed some light on this for me, as I really need to get it working TODAY!! I also enclose a link to the webpage in question:

www.kellyresources.co.uk/disc/disc.asp (http://www.kellyresources.co.uk/disc/disc.asp)

MAny thanks in anticipation of your help.
Teresa

devnull69
07-22-2011, 10:59 AM
In event handlers like onchange "this" is a reference to the current element. In your example "this" is the <select name="cboL1_3">

If you debug the code you'll see that the variables are not undefined. See here: http://jsbin.com/exavoj If you hover the mouse over the example page you will see a button "Edit using JS Bin" on the top right corner. You can use the button to show the full source (HTML/Javascript) involved

Treeze
07-22-2011, 11:22 AM
Thank you so much for your help. What is this jsbin thing? Looks like a great tool for debugging - I had been using Firebug for Firefox and it wasn't giving me these values at all, unless maybe the code doesn't work in FF for some reason?...

devnull69
07-22-2011, 11:44 AM
To enter debug mode in Firebug you'll have to set a breakpoint and refresh the page ... it will then reach the breakpoint and you can step through each line of code and see the current variable values.