How to create a handler that will return the 'ID' of the list element 'LI' Clicked
<p>I am trying to create a handler that will return the 'ID'  of the list element Clicked.   I have tried many variations (with and without the For loop), but I can't seem to make it work. Your help is appreciated.</p>

<h1>Script</h1>

<pre><code>function getItems () {
    var cList = document.getElementById("cMenu");
    var cItems = cList.getElementsByTagName("LI");

    for (var i = 0; i &lt; cItems.length; i++) {

        cItems[i].onclick = function(){
            var theId = this.id;
        };
    }
    console.log(theId);
}
</code></pre>

<h1>HTML Source</h1>

<pre><code>&lt;ul id="cMenu"&gt;
  &lt;li&gt;
    Parent item 1
    &lt;ul&gt;
      &lt;li id="item1"&gt;Child item 1&lt;/li&gt;
      &lt;li id="item2"&gt;Child item 2&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;
    Parent item 2
    &lt;ul&gt;
      &lt;li id="item3"&gt;Child item 3&lt;/li&gt;
      &lt;li id="item4"&gt;Child item 4&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
&lt;/ul&gt;
</code></pre>
