How to get selected value from dynamic dropdown inside a div in javascript

Question

I am trying to get the selected value from a div element which is dynamically populated with a dropdown li. This is on an existing website so we use additional javascript to add listeners to the div. See attached code as example. When I click on "red s" area, I only get part of the html. Ideally I want the entire text "red shoes" which I only get if I click on the "hoes" area. How do I get the entire text of the li element which is clicked?

For example:

 function getEventTarget(e) { e = e || window.event; return e.target || e.srcElement; } var ul = document.getElementById('search_suggestion'); ul.onclick = function(event) { var target = getEventTarget(event); alert(target.innerHTML); }; 

 <div id="search_suggestion"> <ul class="suggestion_keyword"> <li><span class="keywords">red s</span>kirt <div class="brm-autosuggest-nub"></div></li> <li><span class="keywords">red s</span>horts</li> <li><span class="keywords">red s</span>hoes</li> <li><span class="keywords">red s</span>hirt</li> </ul> </div> 

Answer 1

Edited with jquery

 $('li').on('click',function() { alert($(this).text()); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="search_suggestion"> <ul class="suggestion_keyword"> <li><span class="keywords">red s</span>kirt<div class="brm-autosuggest-nub"></div></li> <li><span class="keywords">red s</span>horts</li> <li><span class="keywords">red s</span>hoes</li> <li><span class="keywords">red s</span>hirt</li> </ul> </div> 

Answer 2

Two parts to your problem: first, I'm seeing the click event's target is the span, not the li. Second, as the others have pointed out, you have text and HTML intermingled. You want the full text content, excluding the markup. Either innerText or textContent will work - textContent will preserve line breaks however. Here's a working snippet.

 function getEventTarget(e) { e = e || window.event; return e.target || e.srcElement; } var ul = document.getElementById('search_suggestion'); ul.onclick = function(event) { var target = getEventTarget(event); if(target.tagName === 'SPAN') target = target.parentNode; alert(target.textContent); }; 

 <div id="search_suggestion"> <ul class="suggestion_keyword"> <li><span class="keywords">red s</span>kirt<div class="brm-autosuggest-nub"></div></li> <li><span class="keywords">red s</span>horts</li> <li><span class="keywords">red s</span>hoes</li> <li><span class="keywords">red s</span>hirt</li> </ul> </div> 

Answer 3

Instead of innerHTML , try using textContent

ul.onclick = function(event) {
  var target = getEventTarget(event);
  alert(target.textContent);
};

Answer 4

You can try innerText instead of innerHTML :

ul.onclick = function(event) {
  var target = getEventTarget(event);
  alert(target.innerText);
};