Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Nov 2003
    Location
    Code Heaven
    Posts
    129
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Auto setting event handlers with JS

    Ok,I have the following function:
    function changeColor(obj,newColor)
    {
    obj.style.color=newColor;
    }


    ...Then I have a table(with the id of 'mytable'),in which each cell contains a <p> tag and some text,I want that each <p> tag have an onmouseover and onmouseout event handler defined by JS automaticlly.
    ->This is the first situation(which doesn't work):
    var pars=mytable.getElementsByTagName("p");
    for(var i=0;i<pars.length;i++){pars[i].onmouseover=changeColor(this,'red');
    pars[i].onmouseout=changeColor(this,'black');
    }

    ->This is the second situation(which works):
    var pars=mytable.getElementsByTagName("p");
    for(var i=0;i<pars.length;i++){
    pars[i].onmouseover=function(){this.style.color='red';}
    pars[i].onmouseout=functoin(){this.style.color='black';}
    }


    My question is...in the first situiation....a function reference(pointer) is assigned to the event handler,so it's obvios the function cannot be assigned with any parameters,so...how can I change it's parameters for the first situation to work???
    Thx.

  • #2
    New Coder
    Join Date
    Dec 2003
    Location
    Soraga, Trentino, Italy
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    try so...

    var pars=mytable.getElementsByTagName("p");
    for(var i=0;i<pars.length;i++){pars[i].onmouseover="changeColor(this,'red')";
    pars[i].onmouseout="changeColor(this,'black')";
    }

  • #3
    Regular Coder
    Join Date
    Nov 2003
    Location
    Code Heaven
    Posts
    129
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Originally posted by Dennis
    try so...

    var pars=mytable.getElementsByTagName("p");
    for(var i=0;i<pars.length;i++){pars[i].onmouseover="changeColor(this,'red')";
    pars[i].onmouseout="changeColor(this,'black')";
    }

    var pars=mytable.getElementsByTagName("p");
    for(var i=0;i<pars.length;i++){pars[i].onmouseover=new Function("changeColor(this,'red')");
    pars[i].onmouseout=new Function("changeColor(this,'black')");

    Now it works...

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    this will also work:

    pars[i].onmouseover=function(){changeColor(this,'red')};

  • #5
    Regular Coder
    Join Date
    Nov 2003
    Location
    Code Heaven
    Posts
    129
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I was wondering:
    What's the difference between:
    pars[i].onmouseover=function(){changeColor(this,'red')};
    and:
    pars[i].onmouseover=new Function("changeColor(this,'red')");
    ?


    I mean,in the first case,is a new function object created?
    Coz I can't see any other way u can create functions without a name...
    Plz reply(this is Very important)...
    Thx.


  •  

    Posting Permissions

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