title: javascript onclick for list
body: <p>I am trying to use onclick function on html list elements.
  The function display is getting called but I am not getting the value. It shows undefined in console.
  code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function display() {
    var x = document.getElementById('tags').selectedIndex;
    console.log(x);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul id="tags"&gt;
    &lt;li id="android" value="android" onclick="display()"&gt;android&lt;/li&gt;
    &lt;li id="swing" value="swing" onclick="display()"&gt;swing&lt;/li&gt;
    &lt;li id="eclipse" value="eclipse" onclick="display()"&gt;eclipse&lt;/li&gt;
    &lt;li id="spring" value="spring" onclick="display()"&gt;spring&lt;/li&gt;
    &lt;li id="hibernate" value="hibernate" onclick="display()"&gt;hibernate&lt;/li&gt;
  &lt;ul&gt;</code></pre>
  </div>
  </div>
  </p>