Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Grab the 'this' keyword position

Reply
Thread Tools

Grab the 'this' keyword position

 
 
David
Guest
Posts: n/a
 
      09-08-2006
Is there a way to find which element in an object array the keyword 'this'
is acting upon?

For example:

function doMe(){
var aTags = document.getElementById("list").getElementsByTagNa me("a");
for (var i=0; i<aTags.length; i++) {
aTags[i].onclick=function() {
this.className = "myClass";
}
}
}

Inside of this function is there a way to determine where in the array this
'this' is and return the integer?

var theID = this.somethingOrOtherThatWouldGiveMeTheNumber;
var elementID = document.getElementById("myDiv"+theID);


David J.


 
Reply With Quote
 
 
 
 
RobG
Guest
Posts: n/a
 
      09-08-2006
David wrote:
> Is there a way to find which element in an object array the keyword 'this'
> is acting upon?
>
> For example:
>
> function doMe(){
> var aTags = document.getElementById("list").getElementsByTagNa me("a");
> for (var i=0; i<aTags.length; i++) {
> aTags[i].onclick=function() {
> this.className = "myClass";
> }
> }
> }
>
> Inside of this function is there a way to determine where in the array this
> 'this' is and return the integer?


I'm not quite sure what you mean - if you want to remember the index
value 'i', then yes, you can do that, though you need to avoid a
closure otherwise the value of i will be the same regardless of which
'this' is called (it will be aTags.length).

Try:

aTags[i].onclick = (function(counter){
return function(event){
this.className = 'myClass';
alert(counter);
}
})(i);


The value of 'counter' inside the function is set to the value of 'i'
when the onclick handler is assigned.


> var theID = this.somethingOrOtherThatWouldGiveMeTheNumber;
> var elementID = document.getElementById("myDiv"+theID);


Replace your 'theID' with my 'counter' (or vice versa) and I think you
have it.


--
Rob

 
Reply With Quote
 
 
 
 
David
Guest
Posts: n/a
 
      09-08-2006

"RobG" wrote:
> I'm not quite sure what you mean - if you want to remember the index
> value 'i', then yes, you can do that, though you need to avoid a
> closure otherwise the value of i will be the same regardless of which
> 'this' is called (it will be aTags.length).
>
> Try:
>
> aTags[i].onclick = (function(counter){
> return function(event){
> this.className = 'myClass';
> alert(counter);
> }
> })(i);
>
>
> The value of 'counter' inside the function is set to the value of 'i'
> when the onclick handler is assigned.
>
>
>> var theID = this.somethingOrOtherThatWouldGiveMeTheNumber;
>> var elementID = document.getElementById("myDiv"+theID);

>
> Replace your 'theID' with my 'counter' (or vice versa) and I think you
> have it.



Well, I need to grab the item number within the loop of the script. This
would better explain it..

function doMe(){
var aTags = document.getElementById("list").getElementsByTagNa me("a");
for (var i=0; i<aTags.length; i++) {
aTags[i].onclick=function() {

var theID = this.somethingOrOtherThatWouldGiveMeTheNumber;
var elementID = document.getElementById("myDiv"+theID);

this.className = "myClass"+elementID;
}
}
}

Where the this.className would then be "myClass3" if the 3rd a tag wac
clicked. I tried a few permutations of your method without success (

David J.






 
Reply With Quote
 
RobG
Guest
Posts: n/a
 
      09-08-2006

David wrote:
> "RobG" wrote:
> > I'm not quite sure what you mean - if you want to remember the index
> > value 'i', then yes, you can do that, though you need to avoid a
> > closure otherwise the value of i will be the same regardless of which
> > 'this' is called (it will be aTags.length).
> >
> > Try:
> >
> > aTags[i].onclick = (function(counter){
> > return function(event){
> > this.className = 'myClass';
> > alert(counter);
> > }
> > })(i);
> >
> >
> > The value of 'counter' inside the function is set to the value of 'i'
> > when the onclick handler is assigned.
> >
> >
> >> var theID = this.somethingOrOtherThatWouldGiveMeTheNumber;
> >> var elementID = document.getElementById("myDiv"+theID);

> >
> > Replace your 'theID' with my 'counter' (or vice versa) and I think you
> > have it.

>
>
> Well, I need to grab the item number within the loop of the script. This


The value 'counter' in the example I gave does exactly that. Each and
every instance of the anonymous function added to an A element by doMe
will have a local variable 'counter' that is set to the value of 'i'
when the function is assigned.

Clicking on A elements will show that (presuming the rest of your code
works).


> would better explain it..
>
> function doMe(){
> var aTags = document.getElementById("list").getElementsByTagNa me("a");
> for (var i=0; i<aTags.length; i++) {
> aTags[i].onclick=function() {
>
> var theID = this.somethingOrOtherThatWouldGiveMeTheNumber;


When the A element is clicked on, 'this' will refer to the A element
itself. Does it have a 'somethingOrOtherThatWouldGiveMeTheNumber'
property? I think here is where you wanted to use my 'counter'.


> var elementID = document.getElementById("myDiv"+theID);


Presuming that - "myDiv"+theID - resolves to a string, and that string
is the id of an element, then the right hand side will return a
reference to that element. The reference will be assigned to the local
variable 'elementID'.


> this.className = "myClass"+elementID;


Again, 'this' here is a reference to the A element. Presuming
'elementID' does actually return an object reference, then
concatenating it to the string "myClass" will result in a string
something like "myClass[HTMLelement]" or "myClass[Object]" or similar.


> }
> }
> }
>
> Where the this.className would then be "myClass3" if the 3rd a tag wac
> clicked. I tried a few permutations of your method without success (


Here's a full working example:

<title>A play</title>

<script type="text/javascript">

function doMe(){
var theList = document.getElementById("list");
var aTags = theList.getElementsByTagName("a");
for (var i=0, len=aTags.length; i<len; i++){
aTags[i].onclick = (function(counter){
return function(event){
this.className = "myClass" + counter;
alert(this.className); // Just for debug...
}
})(i);
}
}

window.onload = doMe;

</script>

<div id="list">
<a href="#">A0</a><br>
<a href="#">A1</a><br>
<a href="#">A2</a><br>
</div>

Clicking on A0 shows 'myClass0'. Inspecting it in the DOM inspector
shows it has a class of 'myClass0'. A1 has a class of 'myClass1', and
so on.

But nowhere here have we discussed what it is that you are actually
trying to do, so the above may not be what you want at all - it assigns
the class when the element is clicked on. You might want doMe() to
assign the class when it runs, so:

function doMe(){
var theList = document.getElementById("list");
var aTags = theList.getElementsByTagName("a");
for (var i=0, len=aTags.length; i<len; i++){
aTags[i].className = 'myClass' + i;
aTags[i].onclick = function(){
alert(this.className); // Just for debug...
}
}
}


might do the trick.


--
Rob

 
Reply With Quote
 
David
Guest
Posts: n/a
 
      09-08-2006
[..]
> But nowhere here have we discussed what it is that you are actually
> trying to do, so the above may not be what you want at all - it assigns
> the class when the element is clicked on. You might want doMe() to
> assign the class when it runs, so:
>
> function doMe(){
> var theList = document.getElementById("list");
> var aTags = theList.getElementsByTagName("a");
> for (var i=0, len=aTags.length; i<len; i++){
> aTags[i].className = 'myClass' + i;
> aTags[i].onclick = function(){
> alert(this.className); // Just for debug...
> }
> }
> }
>
>
> might do the trick.


Rob,

I'm gonna need to chomp on this for a bit. That's basically what I want to
do but for simplicitys sake I posted only the bare minimum. If I get stuck
I'll post the entire code but I think from what you have worked out it
should work. I will post back nonetheless the results for everyones ( future
readers ) benefit.

Thank you for your kind assistance.

Davis J.





 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
[tk] grab main window position Larry Perl Misc 0 11-23-2009 12:03 AM
RE: keyword checker - keyword.kwlist Hamilton, William Python 4 05-13-2007 06:31 AM
keyword checker - keyword.kwlist tom@finland.com Python 6 05-10-2007 04:53 PM
Where is Form Relative Position and Absolute Position in VS.Net 2005 ? Luqman ASP .Net 1 02-07-2006 10:27 AM
How to set position of a web control depending on other control's position at run-time? James Wong ASP .Net Web Controls 4 07-14-2004 10:24 AM



Advertisments