[英]How to get the ul li values using Javascript
我想使用javascript在警报框中取一个li的值。(即如果我点击PHP它应该在警告框中警告php)。 但它显示未定义。 请任何人帮忙。
我的代码是
<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>
getElementsByTagName
返回NodeList
,即元素列表 。 但即使您访问了列表中的一个元素, li
元素也没有value
属性(只有表单控件元素具有此属性)。
您可以使用.innerHTML
或.textContent
/ .innterText
来访问HTML元素的内容。
现在,您想获取所单击的li
元素的内容。 由于您将事件处理程序绑定到ul
元素, this
它将始终引用事件处理程序中的ul
元素。
但是您可以通过访问事件对象的target
(或srcElement
(IE))属性来获取触发事件的元素。
兼容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>
我建议在quirksmode.org上阅读有关事件处理的优秀文章 。 它们描述了绑定事件处理程序的不同方式(内联,事件对象具有哪些属性以及浏览器之间的差异)。
注意:内联事件处理程序适用于玩具示例,但只要您要进行一些认真的开发,请使用其他方法绑定事件处理程序。
document.getElementsByTagName() return a node list not an element.
您需要iterract此节点列表以获取每个元素的值示例
var elementsLI = document.getElementsByTagName('li')
var length = document.getElementsByTagName('li').length;
for(var i = 0; i <= length ; ++i){
alert(elementsLI[i].value);
}
希望它能帮到你。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.