Question

My aim is that when the user clicks the row which has a particular data entry, they will be given further information about it. So far my logic was to have the user click the row and there to be a function which passes the innerHTML argument, which is then handled by another function that retrieves additional information. So if there is a list like:

John Doe

Jane Doe

Joe Blow

I thought that when the user was to click on their names, the innerHTML string of whatever they clicked (e.g. “John Doe”) would somehow be passed to getInformation(fullName) where fullName would be “John Doe”.

Here is my HTML:

<div class='row' onclick=alert((this).innerHTML)>
    <div class='label'>
         John Doe
     </div>
</div>
<div class='listSeparator'></div>

The problem is I’m not too sure how to implement this. The (this).innerHTML above obviously doesn’t work since it would just return "<div id ='labeled' class='label'>John Doe</div>". Is there any way to accomplish what I’m trying to do? Or am I even approaching this at the right angle?

Thanks for any information!

Answer 1

Instead of getting the innerHTML of the outer div, you want the innerHTML of the inner div. In the DOM, the inner div is a child of the outer div, so get the outer div’s first child and get the innerHTML of that.

Something like:

onclick=alert((this).childNodes[0].innerHTML)