Grab the 'this' keyword position

Discussion in 'Javascript' started by David, Sep 8, 2006.

  1. David

    David Guest

    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").getElementsByTagName("a");
    for (var i=0; i<aTags.length; i++) {
    aTags.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.
     
    David, Sep 8, 2006
    #1
    1. Advertising

  2. David

    RobG Guest

    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").getElementsByTagName("a");
    > for (var i=0; i<aTags.length; i++) {
    > aTags.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.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
     
    RobG, Sep 8, 2006
    #2
    1. Advertising

  3. David

    David Guest

    "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.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").getElementsByTagName("a");
    for (var i=0; i<aTags.length; i++) {
    aTags.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.
     
    David, Sep 8, 2006
    #3
  4. David

    RobG Guest

    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.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").getElementsByTagName("a");
    > for (var i=0; i<aTags.length; i++) {
    > aTags.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.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.className = 'myClass' + i;
    aTags.onclick = function(){
    alert(this.className); // Just for debug...
    }
    }
    }


    might do the trick.


    --
    Rob
     
    RobG, Sep 8, 2006
    #4
  5. David

    David Guest

    [..]
    > 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.className = 'myClass' + i;
    > aTags.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.
     
    David, Sep 8, 2006
    #5
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Luqman
    Replies:
    1
    Views:
    679
    Luqman
    Feb 7, 2006
  2. Replies:
    6
    Views:
    488
    Peter Otten
    May 10, 2007
  3. Hamilton, William

    RE: keyword checker - keyword.kwlist

    Hamilton, William, May 10, 2007, in forum: Python
    Replies:
    4
    Views:
    376
  4. James Wong
    Replies:
    4
    Views:
    535
    James Wong
    Jul 14, 2004
  5. Larry

    [tk] grab main window position

    Larry, Nov 23, 2009, in forum: Perl Misc
    Replies:
    0
    Views:
    150
    Larry
    Nov 23, 2009
Loading...

Share This Page