...

View Full Version : using "this" in function definition



loonatik
06-04-2003, 09:51 PM
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.

Danne
06-04-2003, 10:01 PM
In IE:




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

loonatik
06-04-2003, 10:07 PM
I tested and it doesnt work. No effect and no errors. I am using it within a frame. Does it make any difference? Thanks.

jkd
06-04-2003, 10:23 PM
function over() {
arguments.callee.caller.arguments[0].currentTarget.style.backgroundColor = "black";
}

Gecko-only.

cheesebagpipe
06-04-2003, 10:29 PM
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

Garadon
06-04-2003, 11:43 PM
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>

Roy Sinclair
06-05-2003, 02:48 PM
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.

Danne
06-05-2003, 03:21 PM
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...:o

Try this... (Still IE)



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

Garadon
06-05-2003, 03:47 PM
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.


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



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

loonatik
06-05-2003, 07:39 PM
Hi everyone,

i originally had one more question, but i think i'm figuring this out. thanks for all the replies.

Mr J
06-05-2003, 08:01 PM
Worked in IE5.5

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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum