How to get the ul li values by passing object using Javascript

Question

I'm creating event handler function for <li> for this I need to write onclick function for each li but I want to make event <ul> .
For this, I referred this link How to get the ul li values using Javascript

But in my case I am using object-oriented flow and I've passed objects to functions but the function is not getting called.
For Ex:

  var handler = { showMessage:function(elementObj){ alert("Function called"); // But this function is not calling } }; 

 <ul id="language" onclick="handler.showMessage({element:this,event:event});"> <li>PHP</li> <li>ASP</li> <li>JAVA</li> <li>CQ5</li> </ul> 

Answer 1

Works if you place the script "before" =>

Answer 2

The problem is that your script is being loaded, but handlers is being scoped to the script file. You can fix this by changing:

var handler = 

to:

window.handler = {

which will make it a property of window (ie. will put it into the global scope).