首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在onClick上获取li值并动态显示

在onClick事件中获取li值并动态显示,可以通过以下步骤实现:

  1. 首先,在HTML中创建一个ul元素,并在其中添加多个li元素,每个li元素都有一个唯一的值,例如:
代码语言:txt
复制
<ul>
  <li onclick="showValue(this)">Item 1</li>
  <li onclick="showValue(this)">Item 2</li>
  <li onclick="showValue(this)">Item 3</li>
</ul>
  1. 在JavaScript中,定义一个名为showValue的函数,该函数接收一个参数,即被点击的li元素。在该函数中,可以通过参数获取li的值,并将其动态显示在页面上,例如:
代码语言:txt
复制
function showValue(li) {
  var value = li.innerHTML;
  alert("Clicked item: " + value);
}
  1. 在上述代码中,通过innerHTML属性获取li元素的文本内容,并将其存储在变量value中。然后,使用alert函数将获取到的值动态显示在弹出框中。你也可以根据需要将值显示在页面的其他位置,例如使用document.getElementById方法获取一个具有特定id的元素,并将值赋给该元素的innerHTML属性。

这样,当用户点击任何一个li元素时,都会触发showValue函数,并将被点击的li元素作为参数传递给该函数。函数内部会获取li的值并进行处理,实现动态显示。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

12分40秒

13分钟详解Linux上安装Vim插件—YouCompleteMe:文本编辑更强大和清爽

领券