passing value to event listener in a loop

**johns221b** · 10-11-2009 01:00 AM

Below body contains nine textfields and onload 'SetListener' is called to attach eventlistener for event 'onpropertychange'. and trying to alert the name of the textfield.

but below code alert always 'Txt9' as its the last value.
My requirement is to pass the corresponding name.

I'm not looking for event.srcElement.name which I knows.
This is a specific requirement,ie, Pass name to event listener within loop.

Code:

function SetListener(){
    var Fields=document.getElementsByTagName("INPUT");
    var Name="";
    for(var i=0;i<Fields.length;i++){
        Name=Fields[i].name;
        Fields[i].attachEvent("onpropertychange",function(){alert(Name)});   
    } 
} 
</script>
<body onload="SetListener()">
<input name="Txt1" />
<input name="Txt2" />
<input name="Txt3" />
<input name="Txt4" />
<input name="Txt5" />
<input name="Txt6" />
<input name="Txt7" />
<input name="Txt8" />
<input name="Txt9" />
</body>

**Tcobb** · 10-11-2009 02:01 PM

The variable "Name" is being created as a global variable by your syntax in the anonymous functions you are creating.

You might could do a quick fix by changing the following line:

Fields[i].attachEvent("onpropertychange",function(){alert(Name)});

to:

eval(Fields[i].attachEvent("onpropertychange",function(){alert(Name)}));

Hope it helps.

**Kor** · 10-12-2009 04:51 AM

1. You may use a self reference, this
2. attachEvent() is an IE only method. In case you don't want to add new functions to a handler, you may use the crossbrowser simple DOM 0 syntax :

element.onevent=function(){somefunction()}

3. onpropertychange is an IE only event. I guess that for your needs, the crossbrowser onchange would be enough

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
/*<![CDATA[*/
function SetListener(){
var Fields=document.getElementsByTagName("input"), f, i=0;
while(f=Fields[i++]){
f.onchange=function(){alert(this.name)}
}
}
onload=SetListener
/*]]>*/
</script>
</head>
<body>
<form action="">
<input name="Txt1" />
<input name="Txt2" />
<input name="Txt3" />
<input name="Txt4" />
<input name="Txt5" />
<input name="Txt6" />
<input name="Txt7" />
<input name="Txt8" />
<input name="Txt9" />
</form>
</body>
</html>

**rnd me** · 10-12-2009 04:09 PM

Originally Posted by Tcobb

The variable "Name" is being created as a global variable by your syntax in the anonymous functions you are creating.

You might could do a quick fix by changing the following line:

Fields[i].attachEvent("onpropertychange",function(){alert(Name)});

to:

eval(Fields[i].attachEvent("onpropertychange",function(){alert(Name)}));

Hope it helps.

there is no global created here, there are no anonymous functions, and you should never use eval for something like this. IE had enough closures and leaks to keep track off without extra eval overhead...

In fact, you should probably not use eval at all until you've been writing javascript for at least 2 years, otherwise it's virtually guaranteed to be abused as a workaround for not understanding something inherit to JavaScript itself.

There are very few tasks below dynamic code generation and/or re-interpretation that demand eval().

**Tcobb** · 10-12-2009 05:22 PM

"There are no anonymous functions here" when you have : x=function(){whatever} its an anonymous function.. Sorry--look at the definition. And it you don't have the wit to use eval(), take your own advice and don't use it until 2011, at the latest, if ever.

**rnd me** · 10-12-2009 09:19 PM

Originally Posted by Tcobb

"There are no anonymous functions here" when you have : x=function(){whatever} its an anonymous function..

anonymous means it has no name, but more importantly to computer science, that it has no identifier. probably arguing over semantics here...

x=function(){whatever} is not an anon function, it's reachable by x after all.
it's just a function statement assign to the variable x, as compared to the named function expressions you see a lot more of.

your event handlers would also be reachable through the event model, and thus not really anonymous either.

in js, we typically use anon functions to create lambda expressions, or to provide a private scope.

examples:

Code:

[1,2,3].reduce(function(a,b){return a+b;});

(function(){
  var x=1, y=2;
  alert(1+2);
}());

s=s.replace(/([\W])/g, function(a,b){
 return b.charCodeAt(0);
});

note that for convenience, javascript allows any function (anon or named) to have an internal name, which is only always recognized by code inside the function:

example:

Code:

var junk=(function myFunc(){
  alert(typeof myFunc);
}());

**web_bert** · 10-13-2009 12:20 AM

To get back to the original question, try this:

Code:

function SetListener(){
    var Fields=document.getElementsByTagName("INPUT");
    for(var i=0, j=Fields.length;i<j;i++){
        (function(Name){
            Fields[i].attachEvent("onpropertychange",function(){alert(Name)});
        })(Fields[i].name)
    } 
}

Thread: passing value to event listener in a loop

Thread Tools

Display

passing value to event listener in a loop

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions