How to add JavaScript event listener to first element of an unordered list

Question

I have simply an unordered list am trying to create with html5 and javascript, I want to add events to this list element eg first element.

Here is my HTML list:

<ul class="aside__list">
    <li class="one">Kutomba kuma</li>
    <li class="two">Kutomba tako</li>
    <li class="three">Kutomba mkundu</li>
    <li class="four">Kutomba malaya</li>
</ul>

JS:

var parentElements = document.getElementsByClassName('aside__list');
for (var i=0; i<parentElements.length; i++) {        
    parentElements[i].addEventListener('click', doStuff, false);
    console.log(parentElements[i]);
}

function doStuff() {
    alert('Delete me');
}
   

I want to add an event to the first element of my list using for loop without using a class or id, now this event applies to every list element in my list,

what do I need to change to get what I want?

Answer 1

You can use:

document.querySelector('ul.aside__list li').addEventListener('click', doStuff);

This matches the first li so you don't need to include :first-child .

Answer 2

Add a listener to the li which is the first child of the list, instead of to every whole .aside__list :

 document.querySelector('.aside__list li:first-child').addEventListener('click', doStuff); function doStuff() { console.log('Delete me'); }

 <ul class="aside__list"> <li class="one">Kutomba kuma</li> <li class="two">Kutomba tako</li> <li class="three">Kutomba mkundu</li> <li class="four">Kutomba malaya</li> </ul>

As comment notes, the :first-child psuedo-selector isn't necessary since querySelector will only return the first matching element, though it may make the code's intent a bit clearer.

Answer 3

This would work for any number of ul.aside__list :

 [...document.querySelectorAll('.aside__list')].forEach( ul => ul.firstElementChild.addEventListener('click', doStuff) ); function doStuff() { console.log('Delete me'); }

 <ul class="aside__list"> <li class="one">Kutomba kuma</li> <li class="two">Kutomba tako</li> <li class="three">Kutomba mkundu</li> <li class="four">Kutomba malaya</li> </ul> <ul class="aside__list"> <li class="one">Kutomba kuma</li> <li class="two">Kutomba tako</li> <li class="three">Kutomba mkundu</li> <li class="four">Kutomba malaya</li> </ul> <ul class="aside__list"> <li class="one">Kutomba kuma</li> <li class="two">Kutomba tako</li> <li class="three">Kutomba mkundu</li> <li class="four">Kutomba malaya</li> </ul>