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>
Share
Improve this question
edited Apr 17, 2015 at 0:38
NewToJS
2,7723 gold badges16 silver badges22 bronze badges
asked Apr 17, 2015 at 0:03
user2760913user2760913
651 gold badge1 silver badge9 bronze badges
1
-
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
Reset to default 5First 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.