www.webdeveloper.com
Results 1 to 7 of 7

Thread: passing value to event listener in a loop

  1. #1
    Join Date
    Jul 2004
    Location
    India
    Posts
    34

    passing value to event listener in a loop

    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>
    johns221b

  2. #2
    Join Date
    Mar 2009
    Posts
    501
    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.

  3. #3
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    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>

  4. #4
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    Quote Originally Posted by Tcobb View Post
    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().
    Last edited by rnd me; 10-12-2009 at 04:12 PM.

  5. #5
    Join Date
    Mar 2009
    Posts
    501
    "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.

  6. #6
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    Quote Originally Posted by Tcobb View Post
    "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);
    }());
    Last edited by rnd me; 10-12-2009 at 09:25 PM.

  7. #7
    Join Date
    May 2007
    Posts
    129
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles