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:

function display() {
  var x = document.getElementById('tags').selectedIndex;
  console.log(x);
}

<ul id="tags">
  <li id="android" value="android" onclick="display()">android</li>
  <li id="swing" value="swing" onclick="display()">swing</li>
  <li id="eclipse" value="eclipse" onclick="display()">eclipse</li>
  <li id="spring" value="spring" onclick="display()">spring</li>
  <li id="hibernate" value="hibernate" onclick="display()">hibernate</li>
<ul>

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:

function display() {
  var x = document.getElementById('tags').selectedIndex;
  console.log(x);
}

<ul id="tags">
  <li id="android" value="android" onclick="display()">android</li>
  <li id="swing" value="swing" onclick="display()">swing</li>
  <li id="eclipse" value="eclipse" onclick="display()">eclipse</li>
  <li id="spring" value="spring" onclick="display()">spring</li>
  <li id="hibernate" value="hibernate" onclick="display()">hibernate</li>
<ul>

• javascript
• html

• And why would a LI have a selectedIndex or a value, it's not an option element ? – adeneo Commented Apr 17, 2015 at 0:07

2 Answers 2

First pass 'this' to the function so it knows where the call is ing from

<ul id="tags">
    <li id="android" value="android" onclick="display(this)">android</li>
    <li id="swing" value="swing" onclick="display(this)">swing</li>
    <li id="eclipse" value="eclipse" onclick="display(this)">eclipse</li>
    <li id="spring" value="spring" onclick="display(this)">spring</li>
    <li id="hibernate" value="hibernate" onclick="display(this)">hibernate</li>
<ul>

Then use getAttribute to get the value

function display(elm) {
  var x = elm.getAttribute('value');
  console.log(x);
}

Just for FYI, if you use jQuery you can simply access the li's directly without having to add the onClick attribute to the LI tags.

<script src="//code.jquery./jquery-1.11.2.min.js"></script>
<script>
$(function() {
    $('ul#tags li').click( function() {
        console.log($(this).attr('value'));
    });
});
</script>
<ul id="tags">
    <li id="android" value="android">android</li>
    <li id="swing" value="swing">swing</li>
    <li id="eclipse" value="eclipse">eclipse</li>
    <li id="spring" value="spring">spring</li>
    <li id="hibernate" value="hibernate">hibernate</li>
<ul>

Edit: Trying to get the value of a list element will give you 0 so as far as I know this is impossible to do using plain JavaScript.

Note:The code below does not work. Sorry.

Your JavaScript would need to look like

function display() {
    var x = this.value;
    console.log(x);
}

What you could do is

var list = getElementByID("#tags");
list.getElementsByTagName("li").onclick = display;

function display() {
    var x = this.value;
    console.log(x);
}

Also make sure that your javascript is inside <script></script> tags.