SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Evangelist artcoder's Avatar
    Join Date
    Aug 2005
    Location
    Planet Earth
    Posts
    599
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Javascript to get parent element

    How do I write Javascript to access the parent element?

    I have code like ...

    Code:
    <script>
    function doit(myElem) {
       alert(myElem.getParent().style.class);
    } 
    
    </script>
    <ul>
    <li class="firsttab"><a href="javascript:doit(this);">one</a></li>
    <li class='secondtab"><a href="javascript:doit(this);">two</a></li>
    </ul>
    When the doit() function is called, I want to access the parent element (the li) and get its style.

    The code in the above alert statement doesn't work. I'm hoping someone can help me replace that line with something that does work.

    Thanks.

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Use myElem.parentNode. Also, consider using unobtrusive methods. If you don't, at least use onclick instead of the horrible javascript: pseudo-protocol in the href attribute.

    Also, doing that above will produce an error, since the style object doesn't have a class. If you want to get the value of the parent's class atribute, do this:
    Code:
    myElem.parentNode.className

  3. #3
    SitePoint Evangelist artcoder's Avatar
    Join Date
    Aug 2005
    Location
    Planet Earth
    Posts
    599
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the quick response. When I do ...

    Code:
    alert(myElem.parentNode.className);
    I get "myElem.parentNode has no properties".

    When I do ...

    Code:
    alert(myElem.parentNode);
    it display "undefined"

    And when I do ...

    Code:
    alert(myElem);
    it displays a valid object.

    Is there something else besides parentNode?

  4. #4
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    That "valid object" is the window object (the default object), not the link you clicked.

    At least use this:
    HTML Code:
    <script>
    function doit(myElem) {
       alert(myElem.parentNode.className);
    } 
    
    </script>
    <ul>
    <li class="firsttab"><a href="#" onclick="doit(this);">one</a></li>
    <li class="secondtab"><a href="#" onclick="doit(this);">two</a></li>
    </ul>
    which works. I don't know why using the "javascript:" syntax doesn't work and to be honest I'm not especially interested because that is the most wrong way of doing things. The code above is a much better (though rather ancient and primitive) method. However, an even better and more modern method is this:
    HTML Code:
    <ul id="tabs">
    <li class="firsttab"><a href="#">one</a></li>
    <li class="secondtab"><a href="#">two</a></li>
    </ul>
    And this javascript goes in the <head> (preferably in an external file):
    Code:
    function init() {
      var tablinks = document.getElementById('tabs').getElementsByTagName('a');
      for (var i = 0, j = tablinks.length; i < j; i++) {
        tablinks[i].onclick = doit;
      }
    }
    function doit() {
      alert(this.parentNode.className);
    }
    window.onload = init;
    Much neater and easier to maintain and it follows the good-practice principles of unobtrusive javascript, as I linked to earlier.

  5. #5
    SitePoint Evangelist artcoder's Avatar
    Join Date
    Aug 2005
    Location
    Planet Earth
    Posts
    599
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great info. Much appreciated.

  6. #6
    SitePoint Member
    Join Date
    Feb 2011
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Raffles View Post
    which works. I don't know why using the "javascript:" syntax doesn't work and to be honest I'm not especially interested because that is the most wrong way of doing things. The code above is a much better (though rather ancient and primitive) method. However, an even better and more modern method is this:
    HTML Code:
    <ul id="tabs">
    <li class="firsttab"><a href="#">one</a></li>
    <li class="secondtab"><a href="#">two</a></li>
    </ul>
    And this javascript goes in the <head> (preferably in an external file):
    Code:
    function init() {
      var tablinks = document.getElementById('tabs').getElementsByTagName('a');
      for (var i = 0, j = tablinks.length; i < j; i++) {
        tablinks[i].onclick = doit;
      }
    }
    function doit() {
      alert(this.parentNode.className);
    }
    window.onload = init;
    Much neater and easier to maintain and it follows the good-practice principles of unobtrusive javascript, as I linked to earlier.
    I'm trying to use your method to add an onClick event to some li tags and the function is only running one time and applying the action one time right off the bat before anything is clicked. Even so, if I click the li after the init function has run (after pageload) if I click an li but nothing happens. The function I attach is ment to togle a different background on and off. The li tags all have unique ids of BL(lowercase) and go from 0 - 8 here is the code.
    Code:
    function init(){
    	try{
    		var brandList = document.getElementById('brandDiv').getElementsByTagName('li');
    		for (var i = 0, j = brandList.length; i < j; i++) {
    			brandList[i].onClick = togle('bl'+i);
    		}
    	}catch(e){
    		alert("init() " + e.description);
    	}
     }
    
    function togle(id){
    	deselectAll(id);
    	var e = document.getElementById(id);
    	switch(e.className){
    		case 'liFirst':
    			e.className = 'liSelectedFirst';
    		break;
    		case 'liSelectedFirst':
    			e.className = 'liFirst';
    		break;
    		case 'li':
    			e.className = 'liSelected';
    		break;
    		case 'liSelected':
    			e.className = 'li';
    		break;
    		default:
    			alert('Unexpected class name');
    		break;
    	}
    }
    HTML Code:
    <div class="scrollCol" id="brandDiv" onMouseDown="javascript:getInfo(event, this)">
    	<ul>
    		<li class="liFirst" id="bl0">Barrett
    		</li>
    		<li class="li" id="bl1">Colt
    		</li>
    		<li class="li" id="bl2">Glock
    		</li>
    		<li class="li" id="bl3">Kel-Tec
    		</li>
    		<li class="li" id="bl4">Kimber
    		</li>
    		<li class="li" id="bl5">Nighthawk
    		</li>
    		<li class="li" id="bl6">Remington
    		</li>
    		<li class="li" id="bl7">Sabre
    		</li>
    		<li class="li" id="bl8">Winchester
    		</li>
    	</ul>
    </div>


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
  •