Select all elements of arrays that are inside an array

Question

I have two list with 3 items each one, i want to show an alert message when someone click on any item.

For all List1 items = 'List1 item clicked' For all List2 items = 'List2 item clicked'

Since the actions is almost the same I want do this in just one code block(so if I need to add an extra list in the future, the code is easy to maintain).

This is my first attemp:

 var list1 = document.getElementsByClassName('list')[0].children; var list2 = document.getElementsByClassName('list')[1].children; var listArray = [list1, list2]; for(i = 0; i < listArray.length; i++){ (function(){ listArray[i][i].onclick = function(){ alert("element clicked"); } })(); } 

 <ul class='list'> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> <ul class='list'> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> 

But strangely that code assign onclick event to only the first element of first array and only the second element of second array.

So my first problem is I dont know how exactly select all child of all arrays in 'listArray' to assing the onclick event to all of them.

And my second problem would be that I dont know how to do this in javascript without event listeners: "If the clicked element is a child of list1 show "message 1", but if the clicked element is a child of list2 then show "message2". I suposse I need a if condition to do this but I dont know how exactly implement it.

Something like this?

if(elementClicked = childOfParentA){
 Do this.
 }else if(elementClicked = childOfParentB){
   Do this.
 }"

Here is a CODEPEN with cosmetics

Please avoid Jquery solutions.

Answer 1

The above code will work for the first item in the first list and the second item in the second list (because you have [i][i] , and 0 is in [0, 1] ).

Here is a possible fix:

 var list1 = document.getElementsByClassName('list')[0].children; var list2 = document.getElementsByClassName('list')[1].children; var listArray = [list1, list2]; for(i = 0; i < listArray.length; i++){ (function(){ for (j = 0; j < listArray[i].length; j++) { var l = i + 1; listArray[i][j].onclick = function(){ alert("List " + l +" element clicked " + this.innerHTML); } } })(); } 

 <ul class='list'> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> <ul class='list'> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> 

Note the usage of the local variable l to save the current list we work on in order to alert the relevant list.

Answer 2

More precise way without storing in separate arrays.

 document.querySelectorAll("ul").forEach(function(ul, index){ ul.querySelectorAll('li').forEach(function(li){ li.onclick = function(){ alert("elements of UL-" + index+1 + " clicked"); } }) }) 

 <ul class='list'> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> <ul class='list'> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> 

Answer 3

It is normal that only the first/first and second/second ... etc respond to the click. This is because you specify it like that:

listArray[i][i]

Notice that i and i are always the same in that line...

You can do this a lot simpler if you would select all the clickable elements in one iterable with an appropriate selector:

 function handler(){ alert("element clicked " + this.textContent); } Array.from(document.querySelectorAll('.list>li'), li => li.onclick = handler); 

 <ul class='list'> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> <ul class='list'> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> 

Answer 4

.className

 window.addEventListener("click", function(e){ console.log (e.target.parentElement.className); }); 

 <ul class='list1'> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> <ul class='list2'> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul>