...

View Full Version : DOM: Associating a value with an event handler?



greenhive
06-22-2006, 12:54 AM
I am wondering how I can associate a value with an event handler. I have info pulled from a database, and each row in the database is displayed as a seperate row in the browser (in text boxes so that users can edit/update the info.)

The info is passed as XML from the server to the browser, which is then parsed and displayed as described above. Each line of info should have a button at the end (UPDATE) such that when it is clicked it kicks in a function (doEditInfo) that will update the current line of information in the database.

I know I can create the button for each line like this:


var mybutton = document.createElement("button");
var theText = document.createTextNode("update");
mybutton.appendChild(theText);
mybutton.onclick = doEditInfo;That button is then appended to the current line as the XML is looped through.

BUT, how does the function doEditInfo know which line to refer to?

In other words, if I was writing this directly into the html instead of DOM scripted, I would write the button part like this:

LINE 1: <button onClick="doEditInfo(1)">UPDATE</button>
LINE 2: <button onClick="doEditInfo(2)">UPDATE</button>
etc..

You can see that a number that references the current line is passed as an argument in the event handler. How do I do that using DOM scripting?

thanks for your help please.

Kravvitz
06-22-2006, 01:42 AM
I often do it like this:

mybutton.onclick = function(){ doEditInfo(1); }

greenhive
06-22-2006, 01:58 AM
How would that work? Would I then define the function doEditInfo elsewhere in the code?

I tried your method and it didn't work for me. Could you expand a little? Thanks.

Kravvitz
06-22-2006, 02:27 AM
Would I then define the function doEditInfo elsewhere in the code?
Yes, of course.


I tried your method and it didn't work for me. Could you expand a little?
Show us what you tried.

greenhive
06-22-2006, 04:38 AM
Okay, I broke the problem I am having down into the simples form in the following code. It loops the variable i from 0 to 5, and on each loop it creates and appends a <p> tag, and then creates and appends a button, onto which it attaches and event handler:


<html>
<head>
<title>FIRM LOCATIONS DOM TEST</title>

<script type="text/javascript" language="JavaScript">

doEditInfo = function(num) {

document.getElementById('show-info').innerHTML = num;
}

window.onload = function () {

for (var i = 0; i < 5; i++) {

var paraElement = document.createElement("p");
document.getElementById('firm-locations').appendChild(paraElement);

/* Create BUTTON */
var mybutton = document.createElement("button");
var theText = document.createTextNode("update");
mybutton.appendChild(theText);
mybutton.onclick = function(){ doEditInfo(i); }

document.getElementById('firm-locations').appendChild(mybutton);

}

return true;
}

</script>

</head>
<body>

<div id="firm-locations"></div>

<br />
<div id="show-info">This text should be replaced with number</div>

</body>
</html>As you can see from the code, when one of the buttons is clicked the text in the lower div should be replaced with a number from 0 to 5.

But if you run the code, what happens is that no matter which button you click, the text is replaced with the number 5, i.e. from the last pass of the loop.

Obviously that is not what I want. I want each different button to return the correct number associated with 'i' in the loop (when the event handler was assigned.)

Any ideas what I need to change to make it work? Thanks.

jkd
06-22-2006, 04:43 AM
What you have there is basically what you want, except for a very common gotcha with scope. To fix:



mybutton.onclick = (function(n) {
return function() { doEditInfo(n) };
})(i);

Kravvitz
06-22-2006, 04:46 AM
jkd is correct. That technique is called a "closure". Here's an explanation of how that works. (http://www.sitepoint.com/forums/showthread.php?t=362415)

greenhive
06-22-2006, 07:44 PM
Wow, thanks a lot for your help. Even after reading some about them since yesterday closures are a bit of a mind bender :confused: for me at the moment. Interesting concept though.

Kor
06-23-2006, 09:54 AM
there is another way, but also using a closure. You may create and attach a variable to the element:

mybutton.ind=i;
mybutton.onclick = function(){ doEditInfo(this.ind); }



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum