<ul id="myList">
    <li id="li_1">
    	<a href="#" onClick="javascript:getId('1')">Get this ID</a>
    </li>
    <li id="li_2">
    	<a href="#" onClick="javascript:getId(2)">Get this ID</a>
    </li>
    <li id="li_3">
    	<a href="#" onClick="javascript:getId(3)">Get this ID</a>
    </li>
</ul>

Hồi mới học js mình cũng hay làm trò này, với 1 đoạn js nhỏ thì việc lấy id của từng thẻ li là điều đơn giản. Mã js như sau:

<script type="text/javascript">
	function getId(el){
		var listElement = el;
		alert("Bạn đã chọn element: li_"+listElement);
	}
</script>

Đó là cách đơn giản, nhưng có vẻ như không phải là chuẩn web bây giờ, vì nó dính mã JS vào trong HTML. Vậy cách bây giờ là thế nào?

2. Cách viết mã mới, xài mootools

Nếu bạn đã include mootools vào trong trang web của mình, vậy thì tại sao phải viết mã như cách trên nữa. Hãy xem mã HTML:

<ul id="myList">
	<li id="li_1"><a href="#">Get this ID</a></li>
	<li id="li_2"><a href="#">Get this ID</a></li>
	<li id="li_3"><a href="#">Get this ID</a></li>
</ul>

Hãy để ý có 1 chút thay đổi nhỏ, đó là đoạn onclick... đã không còn nữa. Và mã js như sau:

<script type="text/javascript">
	window.addEvent('load', function(){
		$('myList').getElements('li').each(function(el){
			el.getElement('a').addEvent('click', function(listID){
				alert("The ID of the list element you've chosen is: "+listID);
				}.pass(el.id)
			);
		});
	});
</script>

Bạn có thể thấy rõ ở trên tôi dùng getElements() để lấy tất cả thẻ <li> ở trong thẻ <ul> có id là myList. Mỗi lần bạn click vào thẻ <a> ở trong thẻ <li>, bạn sẽ thấy js alert lên id của thẻ <li> như cách trên, hãy nhớ cách dùng addEvent nhé.