Q:

javascript - click on any li element

I've got an unordered list and a couple of li elements. Eventually, I will want to have the following functionality. If I click on any of the li elements, an appropriate content will appear in another div (depending on which li I clicked on). Now I'm stuck on kind of generalising the rule:
var li_group = document.getElementsByTagName('li');
// li_group produces an HTML collection, as reported in a browser:
// HTMLCollection [ <li>, <li>, <li>, <li> ]

li_group[1].addEventListener('click', function() {
    alert("hello world");
});

As you can see above, I can do it but when I specify a specific element, eg.li_group[0]. How would I abstract it so I get the following: Click on any of the li elements, and based on the content of the chosen li element, display something on the main div (eg. display the content of the clicked li element on the main div.
I hope it makes sense. Thank you.

A:

You can do something like following
var lis = document.getElementsByTagName("li");

for (var i = 0 ; i < lis.length; i++) {

    lis[i].addEventListener('click', function(event) {
        alert(event.target.textContent);
       // over here you can set the content in main div
    });

}

