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 11 of 11
  1. #1
    New Coder
    Join Date
    Mar 2003
    Posts
    64
    Thanks
    0
    Thanked 0 Times in 0 Posts

    using "this" in function definition

    With a function defined like:

    function over(x){
    x.bgColor = 'black';
    }

    and called: <td onMouseOver="over(this)">text</td>

    Is it possible to call the function without parameters such as
    <td onMouseOver="over()">text</td>?

    How would the function defined then? Cuz I tried:
    this.style.color = 'black'; but it says 'this.style is null or not an object
    I thought "this" is already an when called by passing thru the function. So how come defining it inside the function is incorrect?
    Thanks.

  • #2
    Regular Coder
    Join Date
    Aug 2002
    Location
    São Paulo, Brazil
    Posts
    367
    Thanks
    0
    Thanked 0 Times in 0 Posts
    In IE:

    Code:
    function over(){
        window.event.srcElement.bgColor = 'black';
    }
    /Daniel

  • #3
    New Coder
    Join Date
    Mar 2003
    Posts
    64
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I tested and it doesnt work. No effect and no errors. I am using it within a frame. Does it make any difference? Thanks.

  • #4
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    function over() {
    arguments.callee.caller.arguments[0].currentTarget.style.backgroundColor = "black";
    }

    Gecko-only.

  • #5
    Regular Coder
    Join Date
    Nov 2002
    Posts
    596
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I thought "this" is already an when called by passing thru the function. So how come defining it inside the function is incorrect?
    Because this refers to the owning object - i.e., the object which the property this is being used inside of belongs to. Your function over() is actually

    window.over = function() {.....}

    It's a property of the window object, so this refers to that object. When you do this:

    <td onMouseOver="over(this)">

    ...then, before the function is called, this is resolved to the owning object of the .onmouseover property involved - which is the TD object (TD.onmouseover). It provides a convenient way - essential for object-oriented programming - to refer to any object from within any of its properties. You can then easily navigate around the rest of the object as desired.

    http://www.xs4all.nl/~ppk/js/this.html

  • #6
    Regular Coder
    Join Date
    Jul 2002
    Posts
    698
    Thanks
    0
    Thanked 0 Times in 0 Posts
    the problem is that style ain't an object seing as u didn't declare a style in the tag.

    <td style="color:red" onMouseOver="over(this)">text</td>

  • #7
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Originally posted by Garadon
    the problem is that style ain't an object seing as u didn't declare a style in the tag.

    <td style="color:red" onMouseOver="over(this)">text</td>
    Not true, the style object exists even if you didn't declare an explicit style. But inside a function "this" refers to the function and not the calling object.
    Check out the Forum Search. It's the short path to getting great results from this forum.

  • #8
    Regular Coder
    Join Date
    Aug 2002
    Location
    São Paulo, Brazil
    Posts
    367
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Originally posted by loonatik
    I tested and it doesnt work. No effect and no errors. I am using it within a frame. Does it make any difference? Thanks.
    Sorry...

    Try this... (Still IE)

    Code:
    function over(){
        window.event.srcElement.style.backgroundColor = 'black';
    }
    /Daniel

  • #9
    Regular Coder
    Join Date
    Jul 2002
    Posts
    698
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Not true, the style object exists even if you didn't declare an explicit style. But inside a function "this" refers to the function and not the calling object.

    this refers to the object you are in, and since u are in the in the calling object this must logically be that object u are not within a function in the function call.
    On the style u where rigth though

    so this do work.
    Code:
    <script>
    function over(x){
    x.bgColor = 'black';
    }
    function out(x){
    x.bgColor = 'red';
    }
    </script>
    <body>
      <table>
        <tr>
          <td bgColor="red" onMouseOver="over(this);" onMouseOut="out(this);">text</td>
       </tr>
     </table>
    </body>
    and if he want to use a style.

    Code:
    <script>
    function over(x){
    x.style.background = 'black';
    }
    function out(x){
    x.style.background = 'red';
    }
    </script>
    <body>
      <table>
        <tr>
         <td style="background:red" onMouseOver="over(this);" onMouseOut="out(this);">text</td>
        </tr>
       </table>
    </body>
    Last edited by Garadon; 06-05-2003 at 04:49 PM.

  • #10
    New Coder
    Join Date
    Mar 2003
    Posts
    64
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi everyone,

    i originally had one more question, but i think i'm figuring this out. thanks for all the replies.
    Last edited by loonatik; 06-05-2003 at 08:52 PM.

  • #11
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Worked in IE5.5

    function over(){
    window.event.srcElement.bgColor = 'black';
    }


  •  

    Posting Permissions

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