Getting the value of the clicked li element

event-listener, javascript

Solution

A quick and dirty way is to bind the event to the list, and filter by anchor tags:

JS

var action_list_ul = document.getElementById('action-list');
action_list_ul.addEventListener("click", set_ua_value, false);

function set_ua_value (e) {
  if(e.target.nodeName == "A") {
       console.log(e.target.innerHTML);
    }

}

JS Bin

Alternately, you can filter by `LI`, and access the anchor through `firstChild` or `childNodes[0]`.

Problem

First of all I'm adding an EventListener to the ul, as follows: ``` action_list_ul.addEventListener("click", set_ua_value, false); ``` The set_ua_value job is to: • Listen to every click made on the ul childs (li elements) • get the value (innerHTML?) of the a tag inside the clicked li ``` <ul id="action-list"> <li><a href="#">foo</a></li> <li><a href="#">bar</a></li> </ul> ``` In case foo was clicked on, I need to retrieve the "foo" string. Since I'm fairly new to javascript, I'm not sure how to get the actual "this" of the clicked li. I do not want to use jQuery. Thanks :)

Original source