SitePoint Sponsor

User Tag List

Results 1 to 13 of 13

Hybrid View

  1. #1
    Keep Moving Forward gold trophysilver trophybronze trophy
    Shaun(OfTheDead)'s Avatar
    Join Date
    Nov 2005
    Location
    Trinidad
    Posts
    3,746
    Mentioned
    45 Post(s)
    Tagged
    0 Thread(s)

    Select the Parent of a This Object

    Hi.

    I'm applying an onclick to every span of a webpage, and I'd like to test for the ID of the parent of the span that's clicked.

    Here's my HTML...


    Code HTML4Strict:
    <ins id="Alpha">
        <span id="A Span">Click here to Alert the ID of Parent Object</span>
     
        <form action="" method="post"></form>
    </ins>
     
    <ins id="Beta">
        <span id="B Span">Click here to Alert the ID of Parent Object</span>
     
        <form action="" method="post"></form>
    </ins>

    ...and the Javascript below this...

    Code JavaScript:
    <script type="text/javascript">
    <!--
    // Select all Span Objects
        var spans = document.getElementsByTagName('span');
     
    // Loop through Array of Span Objects and apply Triggers
        for(var i = 0; i < spans.length; i++)
            {
            spans[i].onclick = function()
                {
                alert('Span Clicked');
                alert(this.id);
                alert(this.parent.id);
                }
            }
    -->
    </script>

    ...which makes sense to me, but somehow I'm getting the following error when a span is clicked...

    this.parent is undefined
    Any ideas ?

    Thanks.




    Trying to fill the unforgiving minute
    with sixty seconds' worth of distance run.

    Update on Sitepoint's Migration to Discourse

  2. #2
    We're from teh basements.
    Join Date
    Apr 2007
    Posts
    1,205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    this.parentElement

  3. #3
    Keep Moving Forward gold trophysilver trophybronze trophy
    Shaun(OfTheDead)'s Avatar
    Join Date
    Nov 2005
    Location
    Trinidad
    Posts
    3,746
    Mentioned
    45 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by World Wide Weird
    this.parentElement
    Thanks.

    Tried it but...


    this.parentElement is undefined
    _
    Trying to fill the unforgiving minute
    with sixty seconds' worth of distance run.

    Update on Sitepoint's Migration to Discourse

  4. #4
    We're from teh basements.
    Join Date
    Apr 2007
    Posts
    1,205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    From what I've read lately, this is a common looping problem in event handlers. You need to bind a context object to the onclick handler.

    Code javascript:
    for(var i = 0; i < spans.length; i++)
            {
            spans.item(i).onclick = function(context)
                {
                alert('Span Clicked');
                alert(context.id);
                alert(context.parentElement.id);
                }(spans.item(i));
            }
    Last edited by World Wide Weird; Nov 17, 2008 at 11:41. Reason: "onclick" not "onload"

  5. #5
    Keep Moving Forward gold trophysilver trophybronze trophy
    Shaun(OfTheDead)'s Avatar
    Join Date
    Nov 2005
    Location
    Trinidad
    Posts
    3,746
    Mentioned
    45 Post(s)
    Tagged
    0 Thread(s)
    That syntax would give you the event object, no ?




    Trying to fill the unforgiving minute
    with sixty seconds' worth of distance run.

    Update on Sitepoint's Migration to Discourse

  6. #6
    We're from teh basements.
    Join Date
    Apr 2007
    Posts
    1,205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Shaun(OfTheDead) View Post
    That syntax would give you the event object, no ?
    Not sure. Here's an adaptation based on an article I read about closures and the looping problem.

    Code javascript":
    for(var i = 0; i < spans.length; i++)
            {
            spans.item(i).onclick = function(context)
                {
                  return function() 
                    {
                      alert('Span Clicked');
                      alert(context.id);
                      alert(context.parentElement.id);
                    }
                 }
                }(spans.item(i));
            }

    http://www.robertnyman.com/2008/10/0...-and-closures/

  7. #7
    Keep Moving Forward gold trophysilver trophybronze trophy
    Shaun(OfTheDead)'s Avatar
    Join Date
    Nov 2005
    Location
    Trinidad
    Posts
    3,746
    Mentioned
    45 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by World Wide Weird
    Thanks, I'll check it out.

    By the way, I'm pretty sure there's no such thing as "parentElement".




    Trying to fill the unforgiving minute
    with sixty seconds' worth of distance run.

    Update on Sitepoint's Migration to Discourse

  8. #8
    Keep Moving Forward gold trophysilver trophybronze trophy
    Shaun(OfTheDead)'s Avatar
    Join Date
    Nov 2005
    Location
    Trinidad
    Posts
    3,746
    Mentioned
    45 Post(s)
    Tagged
    0 Thread(s)
    AHA!

    "parentNode" !

    The script works now.


    Code JavaScript:
    <ins id="Alpha">
        <span id="A Span">Click here to Alert the ID of Parent Object</span>
     
        <form action="" method="post"></form>
    </ins>
     
    <ins id="Beta">
        <span id="B Span">Click here to Alert the ID of Parent Object</span>
     
        <form action="" method="post"></form>
    </ins>
     
    <script type="text/javascript">
    // Select all Span Objects
    	var spans = document.getElementsByTagName('span');
     
    // Loop through Array of Span Objects and apply Triggers
    	for(var i = 0; i < spans.length; i++)
    		{
    		spans[i].onclick = function()
    			{
    			alert('Span Clicked');
    			alert(this.id);
    			alert(this.parentNode.id);
    			}
    		}
    </script>

    _
    Trying to fill the unforgiving minute
    with sixty seconds' worth of distance run.

    Update on Sitepoint's Migration to Discourse

  9. #9
    Keep Moving Forward gold trophysilver trophybronze trophy
    Shaun(OfTheDead)'s Avatar
    Join Date
    Nov 2005
    Location
    Trinidad
    Posts
    3,746
    Mentioned
    45 Post(s)
    Tagged
    0 Thread(s)
    UPDATE: Just tested and it works in Safari, Internet Explorer and Opera as well.




    Trying to fill the unforgiving minute
    with sixty seconds' worth of distance run.

    Update on Sitepoint's Migration to Discourse

  10. #10
    We're from teh basements.
    Join Date
    Apr 2007
    Posts
    1,205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Mia culpa. parentElement is from a PHP app I'm working on. So help me, I can't keep them straight.

    All's well that ends well, hey?

  11. #11
    Keep Moving Forward gold trophysilver trophybronze trophy
    Shaun(OfTheDead)'s Avatar
    Join Date
    Nov 2005
    Location
    Trinidad
    Posts
    3,746
    Mentioned
    45 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by World Wide Weird
    Mia culpa. parentElement is from a PHP app I'm working on. So help me, I can't keep them straight.
    Likewise.

    More than once I've started Javascript variables with $.

    Thanks for your feedback anyway, dude. It made me research it which led to me finding the correct syntax.




    Trying to fill the unforgiving minute
    with sixty seconds' worth of distance run.

    Update on Sitepoint's Migration to Discourse

  12. #12
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    FYI, quicker way to loop through DOM nodes:

    Code JavaScript:
    var spans = document.getElementsByTagName('span'),
        length = spans.length;
     
    while(length--) {
        spans[length].onclick = function()
        {
            alert('Span Clicked');
            alert(this.id);
            alert(this.parentNode.id);
        }
    }
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  13. #13
    Keep Moving Forward gold trophysilver trophybronze trophy
    Shaun(OfTheDead)'s Avatar
    Join Date
    Nov 2005
    Location
    Trinidad
    Posts
    3,746
    Mentioned
    45 Post(s)
    Tagged
    0 Thread(s)
    Interesting.

    Would you believe I've never used a while loop before, neither in Javascript nor in PHP ?

    Thanks for the tip, I'll give it a try




    Trying to fill the unforgiving minute
    with sixty seconds' worth of distance run.

    Update on Sitepoint's Migration to Discourse


Bookmarks

Posting Permissions

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