473,326 Members | 2,104 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,326 software developers and data experts.

Grab the 'this' keyword position

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.
Sep 8 '06 #1
4 1385
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

Sep 8 '06 #2

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


Sep 8 '06 #3

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

Sep 8 '06 #4
[..]
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.

Sep 8 '06 #5

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

12
by: Larry R. Baker | last post by:
Is it possible to grab a client side IP Address using JavaScript in an htm page? I have a web page hosted on a non-ASP server and I want a piece of code in JavaScript to grab the IP address of the...
22
by: Robert Brown | last post by:
suppose I have the following table: CREATE TABLE (int level, color varchar, length int, width int, height int) It has the following rows 1, "RED", 8, 10, 12 2, NULL, NULL, NULL, 20...
3
by: MLH | last post by:
I've lost ability to drag the slider bar at bottom of database window in A97 on many occasions. Have no clue as to the origin of this. Do know that its darned inconvenient. Comments appreciated.
9
by: Alexander Muylaert | last post by:
Hi for some reason the BinaryWriter is Closing the stream when disposed. I don't want it to close the stream. According to my logic the BinaryWriter should Write to the stream, nothing more. ...
17
by: Hazz | last post by:
In this sample code of ownerdraw drawmode, why does the '(ComboBox) sender' line of code need to be there in this event handler? Isn't cboFont passed via the managed heap, not the stack, into this...
5
by: Digital.Rebel.18 | last post by:
I'm trying to figure out how to extract the keywords from an HTML document. The input string would typically look like: <meta name='keywords' content='word1, more stuff, etc'> Either single...
4
by: Marc | last post by:
Hi, In order to save user preferences I need to grab the name and position of all buttons on a form, which i will then save to a text file. Anyone know how I can easily get this information? ...
1
by: snow | last post by:
The Ultimate Keyword Optimization Guide for Search Engine Positioning http://www.163as.com/news/Router%20Commands.html
2
by: Sebastian Morawietz | last post by:
Hi, given this code: function test() { ({ call: function(fn) { fn(); },
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.