Javascript to get parent element

JavaScript
1

How do I write Javascript to access the parent element?

I have code like …



<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

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:

myElem.parentNode.className
3

Thanks for the quick response. When I do …


alert(myElem.parentNode.className);

I get “myElem.parentNode has no properties”.

When I do …


alert(myElem.parentNode);

it display “undefined”

And when I do …


alert(myElem);

it displays a valid object.

Is there something else besides parentNode?

4

That “valid object” is the window object (the default object), not the link you clicked.

At least use this:

<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:

<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):

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

Great info. Much appreciated.

6

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.

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;
	}
}


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