Simple HTML/JS event question 2

[DLayzell]

Good Day Tekkies,

I've been writing some javascript functions to use as events in an HTML page for various reasons. Form validation, rollovers, etc.

In the functions, I've been hard-coding the parent HTML object's ID to make it work, but this make my code hard to reuse in the future, as I will have to edit my javascript to use the proper IDs.

I'm wondering if there is a way for me to pass the HTML object ID as a parameter of the javascript function call.

Ex.:

<div id="testdiv" onmouseover="js_function([b]<div id>[/b])"></div>

I've seen other developers using the this and the self keywords in either their JS or HTML, and I've tried this route, but I don't think I'm implementing it correctly, as I can't get it to work. If this is CLOSE to right, I'd like an explanation that I can refer to. Does any tek have such a reference?

If I'm all wrong there, I'm willing to hear any other advice.

Thanks in advance,

Dave

David Layzell, A+, Project+
Computer Network Engineering Grad
5 years SysAdmin, 11 years hobbyist Dev

http://www.davidlayzell.com

 

[feherke]

Hi

I'm wondering if there is a way for me to pass the HTML object ID as a parameter of the javascript function call.

[b]<div[/b] [maroon]id[/maroon][teal]=[/teal][green][i]"testdiv"[/i][/green] [maroon]onmouseover[/maroon][teal]=[/teal][green][i]"js_function(this.id)"[/i][/green][b]></div>[/b]

Feherke.

http://free.rootshell.be/~feherke/

 

[DLayzell]

Works beautifully, thank you, feherke!

So, am I to assume that the this keyword refers to the parent object, or the object that the function is a method of?

Is there any info on the self keyword?

David Layzell, A+, Project+
Computer Network Engineering Grad
5 years SysAdmin, 11 years hobbyist Dev

http://www.davidlayzell.com

 

[vacunita]

2 things:

Depending on how your are coding your function, you may not need to use the ID if you are passing the object.

That is passing 'this.id' and then inside your function using that in document.getElementById(...) would be redundant.
Since you can just directly use the object being passed instead of using the object (this) to get its own ID (this.id) and then using its own passed ID (this.ID) to get the object again (the result of getElementById).

This refers to the object that the event belongs to, not the function. Since the function can be run from many objects's events. However the triggered event will belong to a single object at that point.


As far as 'self' is concerned, this is a way to address the current window. you can use self.location to set or get the browser window's current URL address. If you set it it will make the browser open the specified page.
Its mostly used when working with frames. If you need to refer to the frame where the code is running.


----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[DLayzell]

Thank you for the reply, Phil, I had been using the parameter to load a variable with GetElementByID, and I did think that it was redundant.

However, I'm now trying to use this directly in my function, and I'm not getting anywhere.

Here's some working (albeit inefficient) code:

function reset(p_div){
	var o_obj=document.getElementById(p_div);
	o_obj.style.backgroundColor = v_orig;
}

Now, I've tried just about every combination I can think of using this and this.id inside my function, but no joy. I've tried:

this.style.backgroundColor

this.id.style.backgroundColor

document.this.style.backgroundColor

document.this.id.style.backgroundColor

document.element(this).style.backgroundColor

document.element(this.id).style.backgroundColor

As well as a couple other combinations that I can't remember right now.

What am I doing wrong?

David Layzell, A+, Project+
Computer Network Engineering Grad
5 years SysAdmin, 11 years hobbyist Dev

http://www.davidlayzell.com

 

[vacunita]

This is basic function calling and usage in most programming languages:

Your function is set to receive a variable called 'p_div'

function reset([red]p_div[/red]){
...

If you call it and pass the object reference 'this' to it, then your p_div variable will be an object. The div object you are passing.

onmouseover="reset([blue]this[/blue]);"

I you use a string that has the id of the div, or if you use 'this.id' when you call your function then your variable p_div will contain string with the div's id inside.

onmouseover="reset([blue]this.id[/blue]);"

or

onmouseover="reset([COLOR=#FF6600]'Testdiv'[/color]);"

You don't use 'this' inside your function you use the variable that the function is defined to expect, in your case p_div.


So p_div will change depending on what you pass to your function. If you pass a string it will be a string, if you pass an object reference it will be an object.

|so if you use the 'this' reference you can access the backgroundColor as per your example as:

[red]p_div[/red].style.backgroundColor

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[DLayzell]

Ahh, of course. Thanks for that.

Then, is this an altogether unrelated keyword in javascript? It does appear to be valid syntatically (although obviously being used wrong) inside my .js file.

David Layzell, A+, Project+
Computer Network Engineering Grad
5 years SysAdmin, 11 years hobbyist Dev

http://www.davidlayzell.com

 

[vacunita]

'this' is a reference. It will change depending on where it is used. As it points ot the current owner of the function or JS code that is using the keyword at that moment.
This page seems to explain it better than I can.

http://www.quirksmode.org/js/this.html

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[DLayzell]

|so if you use the 'this' reference you can access the backgroundColor as per your example as:

<div id="testdiv" onmouseover="js_func(this)"></div>

function js_func(p_div){
     p_div.style.backgroundColor;
}

This example does not work either. (This was one of the first combinations I tried now that I think about it) Thank you for the explanation of datatypes and parameter passing though. Always good to have a refresher of the basics once in awhile.

The link should be helpful. I'm leaving my code as is until I wrap my head around the this keyword completely. The code is functional and recyclable, which is both my objectives achieved. Cheers.

David Layzell, A+, Project+
Computer Network Engineering Grad
5 years SysAdmin, 11 years hobbyist Dev

http://www.davidlayzell.com

 

[vacunita]

It works for me.

Of course you noticed that this: p_div.style.backgroundColor; doesn't really do anything. That was just to show you how to access the property, but unless you do something with it, it really doesn't do anything.

You might want to put that in an alert or something that will show the value to you.

function js_func(p_div){
     [red]alert([/red]p_div.style.backgroundColor[red])[/red];
}

Also the background-color property must be set either by Javascript or by inline style, to be accessible otherwise its blank.

<div style="[blue]background-color:#0000FF[/blue]" onClick="js_func(this);">Blue Div</div>

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[DLayzell]

Okay, I've discovered my issue. I was using the p_div parameter in the context of my working code and not your example, yes, but what I failed to do was reload my .js file. The HTML was refreshed with the this keyword (instead of passing this.id), but the .js was still in cache expecting this.id to be passed. D'oh!

Thanks again, Phil. There's a couple lines of code gone!

David Layzell, A+, Project+
Computer Network Engineering Grad
5 years SysAdmin, 11 years hobbyist Dev

http://www.davidlayzell.com