Dynamic Event Handler problem

[dhsieh]

Hello all,

I am working on a function that renames each table row's elements, as well as reassigning the function calls dynamically. I ran into a problem where I am trying to assign the new functions. Pardon me if this sounds confusing, here is the snippet of code.

[CODE=javascript]
var i;
for(i=1; i<=numRows; i++) {
tbl.rows[i].id = "row" + i; //Rename each row
tbl.rows[i].cells[0].firstChild.id = "serial" + i; //Rename each serial element
tbl.rows[i].cells[1].childNodes[0].id = "ncCode" + i; //Rename each ncCode element
tbl.rows[i].cells[1].childNodes[1].id = "configCode " + i; //Rename each configure button element
tbl.rows[i].cells[1].childNodes[1].onclick = function() {
configureCode(i ); // <== here is the problem
}
}
[/CODE]

I have marked where the problem is, basically the configureCode function expects a number, and I want to be able to pass in a parameter of i which is the loop counter, that way as I rename an element, I reassign the parameters for the function to that new element. How would I be able to pass in the value of i into the configureCode function? Thanks for your help.

Edit: I have also tried different variations to try to get the function to accept the value of i with no avail.

[CODE=javascript]
tbl.rows[i].cells[1].childNodes[1].onclick = configureCode(i );
[/CODE]
and
[CODE=javascript]
tbl.rows[i].cells[1].childNodes[1].onclick = function(i) {
configureCode(i );
}
[/CODE]

[iam_clint]

[CODE=javascript]
tbl.rows[i].cells[1].childNodes[1].onclick = function("confi gureCode("+i+") ") {}
[/code]

I can't really remember 100% but i believe you can do it this way.

[dhsieh]

[CODE=javascript]
tbl.rows[i].cells[1].childNodes[1].onclick = function("confi gureCode("+i+") ") {}
[/code]

I can't really remember 100% but i believe you can do it this way.

Thanks for replying iam_clint, I tried that method and it threw me an error "missing formal parameter"

[iam_clint]

[CODE=javascript]
var i;
for(i=1; i<=numRows; i++) {
tbl.rows[i].id = "row" + i; //Rename each row
tbl.rows[i].cells[0].firstChild.id = "serial" + i; //Rename each serial element
tbl.rows[i].cells[1].childNodes[0].id = "ncCode" + i; //Rename each ncCode element
tbl.rows[i].cells[1].childNodes[1].id = "configCode " + i; //Rename each configure button element
tbl.rows[i].cells[1].childNodes[1].setAttribute(" count", i);
tbl.rows[i].cells[1].childNodes[1].onclick = function() {
configureCode(t his.getAttribut e("count")); // <== here is the problem
}
}
[/CODE]
how about this

[dhsieh]

That worked great, thank you very much. Is the count attribute a custom attribute? I thought one could only set attributes that pertain to the element.

I was trying out my own fixes to this problem and I encountered something weird.

[CODE=javascript]
for(var i=1; i<=numRows; i++) {
alert(i);

tbl.rows[i].cells[1].childNodes[1].onclick = function () {
alert(i);
}
}
[/CODE]

Now this loop only ran once, and the first alert of i was 1, however the second alert of i was 2 (When I clicked the button for that event). I didn't increment i anywhere in the loop, nor is i a global variable. I tested by changing i to something else and it still did the same thing. Perhaps it was an error elsewhere in my code?

[iam_clint]

You can add custom attributes to any element (see my tutorial on text affects here there was some talk about custom attributes)


as to an error in your code i think not..

what it was doing was storing i globally some how.
[CODE=javascript]
<script type="text/javascript">
for (var i=1; i<=1; i++) {
alert(i);
}
alert(i);
</script>
[/CODE]

i would be 2 that would be correct..

let me write this for loop more explainable to you
[CODE=javascript]
var i=1;
while (i<=1) {
i++; //well i was 1 i = 1 so it came in the for loop now, i = 2.
alert(i);
} // i is not less than or = to 1 anymore its now 2
alert(i); // i = 2
[/CODE]