如何使用Javascript获取ul li值

i would like to take the value of an li in alert box using javascript.(i.e If i click on PHP it should alert php in alert box). But its showing undefined. Please anyone help on this.

我想使用javascript在警告框中取一个li的值。(即如果我点击PHP它应该在警告框中警告php)。但它显示未定义。请有人帮忙解决这个问题。

My code is

我的代码是

<script type="text/javascript">
    function lang1()
    {
    var a = document.getElementsByTagName("li").value;
    alert(a);
    }
</script>

<form>
    <ul id="language" onclick="lang1();">
        <li>PHP</li>
        <li>ASP</li>
        <li>JAVA</li>
        <li>CQ5</li>
    </ul>     
</form>

2 个解决方案

#1

getElementsByTagName returns a NodeList, i.e. a list of elements. But even of you accessed one element of the list, li elements don't have a value property (only form control elements have this property).

getElementsByTagName返回NodeList,即元素列表。但即使您访问了列表中的一个元素,li元素也没有value属性(只有表单控件元素具有此属性)。

You can use .innerHTML or .textContent/.innterText to access the content of HTML elements.

您可以使用.innerHTML或.textContent / .innterText来访问HTML元素的内容。

Now, you want to get the content of the li element that was clicked. Since you bound the event handler to the ul element, this will always refer to the ul element inside the event handler.
But you can get the element which triggered the event by accessing the target (or srcElement (IE)) property of the event object.

现在,您想要获取所单击的li元素的内容。由于您将事件处理程序绑定到ul元素,因此它将始终引用事件处理程序中的ul元素。但是您可以通过访问事件对象的目标(或srcElement(IE))属性来获取触发事件的元素。

W3C compatible browsers pass the event object as argument to the event handler. In older IE versions the event object is available as global variable, window.event. Since you are using inline event handlers there is no difference for you in this case.

兼容W3C的浏览器将事件对象作为参数传递给事件处理程序。在较旧的IE版本中,事件对象可用作全局变量window.event。由于您使用的是内联事件处理程序,因此在这种情况下没有任何区别。

<script type="text/javascript">
    function lang1(event) {
        var target = event.target || event.srcElement;
        alert(event.target.innerHTML);
    }
</script>

<form>
    <ul id="language" onclick="lang1(event);">
        <li>PHP</li>
        <li>ASP</li>
        <li>JAVA</li>
        <li>CQ5</li>
    </ul>     
</form>

DEMO

I recommend to read the excellent articles about event handling on quirksmode.org. They describe the different ways of binding event handlers (inline ve, which properties the event object has and the differences between browsers.

我建议在quirksmode.org上阅读关于事件处理的优秀文章。它们描述了绑定事件处理程序的不同方式(内联,事件对象具有哪些属性以及浏览器之间的差异)。

Note: Inline event handlers are OK for toy examples, but as soon as your going to do some serious development, use other ways to bind event handlers.

注意:内联事件处理程序适用于玩具示例,但只要您要进行一些认真的开发,请使用其他方法绑定事件处理程序。

#2

document.getElementsByTagName() return a node list not an element.

You need iterract this node list to get the value of each element Example

您需要iterract此节点列表以获取每个元素的值示例

var elementsLI = document.getElementsByTagName('li')
var length = document.getElementsByTagName('li').length;
for(var i = 0; i <= length ; ++i){
alert(elementsLI[i].value);
}

Hope it helps you.

希望它能帮到你。

#1