Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder Actinia's Avatar
    Join Date
    Feb 2007
    Location
    Essex, UK
    Posts
    250
    Thanks
    1
    Thanked 23 Times in 22 Posts

    Accessing an elements ID from within an event handler

    I have many examples within my page of the form:
    Code:
    <a id="L1" href="#" onclick="return showSpan();" onblur="return hideSpan();"><span> ... </span></a>
    The page is styled so that hovering over the link displays the contents of the hidden <span> as a block without any javascript. I want this to work (that is display the span as a block) when the user tabs onto a link (and presses Return/Enter). When the user tabs away, it should hide the <span>.

    My starting code looks like:
    Code:
    function showSpan() {
      var linkID = document.getElementById(this.id);
      var classList = linkID.getElementsByTagName('span');
      var divID = classList[0];
          divID.style.display = "block";
          return false;
    } // function
    with a similar function for hideSpan(),

    Ultimately I would like to add these event handlers in the initialisation phase, which is why I have used a parameterless function.

    Whenever I try this, I get an error that this.id does not exist.

    How can I attach these event handlers?

    John Rostron

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    No no no...this is *NOT* available in the function. It's only available AT THE POINT OF THE EVENT. That is, within the element.

    So you need to *PASS* it to the function:
    Code:
    <a href="#" 
       onclick="return showSpan(this,true);" 
       onblur="return showSpan(this,false);">
         <span> ... </span>
    </a>
    and then it's easy:
    Code:
    function showSpan(link,show) 
    {
        link.getElementsByTagName('span')[0].style.display = show ? "inline" : "none";
        return false;
    }
    <span> elements *USUALLY* should use a display value of "inline", not "block", so I change that for you. But you can try "block" to see if it makes a difference.

    [Actually, you don't need the return in the onblur handler, but it won't hurt.]
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    To do it via initialization, you probably do want an ID:
    Code:
    <a href="#" id="L1"
         <span> ... </span>
    </a>
    and then your initialization code does this:
    Code:
        var link = document.getElementById("L1");
        link.onclick = function() { return showSpan(this,true); };
        link.onblur  = function() { return showSpan(this,false); };
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    And pardon me for saying this, but
    Code:
        document.getElementById(this.id)
    is a kind of silly construction. Because
    Code:
           document.getElementById(this.id) === this   !!!!
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    Regular Coder Actinia's Avatar
    Join Date
    Feb 2007
    Location
    Essex, UK
    Posts
    250
    Thanks
    1
    Thanked 23 Times in 22 Posts
    Thanks to Old Pedant for this. I shall try this out. I had been looking in all my books, and the status of the this keyword was not at all clear, especially your last point: about the identity of this.

  • #6
    Regular Coder Actinia's Avatar
    Join Date
    Feb 2007
    Location
    Essex, UK
    Posts
    250
    Thanks
    1
    Thanked 23 Times in 22 Posts
    I have now tried it out and it works as required. My pages will now work for those unable or unwilling to use the mouse.

    Thanks to Old Pedant.

    John

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Let me see if I can explain.

    Let's use an example:

    Code:
    <html>
    <body>
    <a href="http://www.google.com" id="DEMO" 
       onclick="alert(this.id);alert( document.getElementById(this.id).href ); return false;" /> 
    CLICK ME </a>
    </body>
    </html>
    Okay, in that code, this refers to the element that it is found in. To wit, the <a> tag.

    So the first alert there will, as I hope you expect, show DEMO to you.

    Makes sense, yes? The element is <a>. The id of the element is DEMO. this.id is thus DEMO.

    In the second alert, then, when we use this.id, we are really using the string DEMO, right?

    So we are doing document.getElementById("DEMO") (effectively).

    And what do you think that function call returns?

    A *reference* the element that has the id DEMO.

    And just what element is that? Why the very same <a> element.

    SO....

    this is a reference to the <a> element.

    document.getElementById(this.id) is a reference to the SAME <a> element.

    Or, as I stated
    Code:
       document.getElementById(this.id) === this
    They are 100% equivalent. And to prove it yet again, let's change the above code:

    Code:
    <html>
    <body>
    <a href="http://www.google.com" id="DEMO" 
       onclick="alert(this.id);alert( this.href ); return false;" /> 
    CLICK ME </a>
    </body>
    </html>
    Okay?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •