javascript onclick for list

Question

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>

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

James Grundner · Accepted Answer · 2015-04-17 02:03:00Z

First pass 'this' to the function so it knows where the call is coming 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.com/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>

dosek125 · Accepted Answer · 2015-04-17 00:40:09Z

-1

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.

edited Apr 17, 2015 at 0:40

answered Apr 17, 2015 at 0:16

dosek125

1189 bronze badges

3 Comments

NewToJS Over a year ago

I could agree more. Not checking your answer before submitting isn't a good thing to do.

dosek125 Over a year ago

Yes. I wanted to delete it as soon as I've spotted the mistake but it got quickly accepted. I'm new to SO, I guess I'll have to learn from my mistakes.

NewToJS Over a year ago

We all make mistakes. Check James Grundner's Answer, that is the correct way to get the value attribute of the list item element.

Collectives™ on Stack Overflow

javascript onclick for list

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related