首页
学习
活动
专区
工具
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的值并进行处理,实现动态显示。

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

相关·内容

React Hooks踩坑分享

本文主要讲以下内容: 函数式组件和类组件的不同 React Hooks依赖数组的工作方式 如何在React Hooks中获取数据 一、函数式组件和类组件的不同 React Hooks由于是函数式组件...={() => { setNum(num + 1) }}>点我 展示现在的 </div...(其实这些归根究底,就是React Hooks会形成闭包) 三、如何在React Hooks中获取数据 在我们用习惯了类组件模式,我们在用React Hooks中获取数据时,一般刚开始大家都会这么写吧:...但是依赖内部变量,可以将其在effect之外调用它,让effect依赖于它的返回。 万不得已的情况下,你可以把函数加入effect的依赖项,但把它的定义包裹进useCallBack。...然而id的需要异步获取(只要获取一次,就可以在这个组件卸载之前一直用),query的从props传入: function Demo(props) { const { query } = props

2.9K30

React 给归档页面添加分类功能

获取所有分类: 创建 allCategories 变量,它是一个存储所有文章分类的数组。通过对 allPostsData 中的文章进行扁平化处理,提取出所有的分类,使用 Set 数据结构去重。.../lib/posts'; // 获取静态数据 export async function getStaticProps() { // 获取所有文章数据并按日期排序 const allPostsData...如果 selectedCategory 有,则只保留属于该分类的文章,否则保留所有文章。最后,我们可以使用 filter 函数来过滤掉没有文章的年份。...我们还需要获取所有文章的分类,以便在页面上显示分类按钮。...通过使用 useState 来管理选择的分类状态,处理分类按钮的点击事件,根据选择的分类筛选文章列表,我们能够动态显示所选分类下的文章。

35840
  • 事件高级

    IE 提出从目标元素开始,然后一层一层向外接收事件响应,也就是冒泡型事件流。 Netscape(网景公司)提出从最外层开始,然后一层一层向内接收事件响应,也就是捕获型事件流。 ​...鼠标触发事件的话,会得到鼠标的相关信息,鼠标位置。 键盘触发事件的话,会得到键盘的相关信息,如按了哪个键。...当我们注册事件时,event 对象就会被系统自动创建,依次传递给事件监听器(事件处理函数) ....事件对象的兼容性处理 事件对象本身的获取存在兼容问题: 标准浏览器中是浏览器给方法传递的参数,只需要定义形参 e 就可以获取到。...以上案例:给ul注册点击事件,然后利用事件对象的target来找到当前点击的li ,因为点击li,事件会冒泡到ul, ul有注册事件,就会触发事件监听器。

    1.4K20

    「Web编程API」- 03

    删除 熊大 熊二 光头强 // 1.获取元素 var...IE 提出从目标元素开始,然后一层一层向外接收事件响应,也就是冒泡型事件流。 Netscape(网景公司)提出从最外层开始,然后一层一层向内接收事件响应,也就是捕获型事件流。...鼠标触发事件的话,会得到鼠标的相关信息,鼠标位置。 键盘触发事件的话,会得到键盘的相关信息,如按了哪个键。 事件对象的使用 事件触发发生时就会产生事件对象,并且系统会以实参的形式传给事件处理函数。...事件对象的兼容性处理 事件对象本身的获取存在兼容问题: 标准浏览器中是浏览器给方法传递的参数,只需要定义形参 e 就可以获取到。...只要“||”前面为true, 不管“||”后面是true 还是 false,都返回 “||” 前面的

    1.4K50

    事件

    有传统方式和方法监听方式 传统方式 利用 on 开头的事件, onclick, 同一个元素同一个事件只能设置一个处理函数,出现多个处理函数的话,后面的会覆盖前面的。... onclick、onmouseover,要带 on callback: 事件处理函数,事件发生会调用该回调函数 IE9 之前的 IE 不支持,对应有 attachEvent(),用法和 addEventListener...不需要传递实参 注册事件时,event 对象会被系统自动创建,依次传递给事件监听器(事件处理函数)。...在 IE6~8 中,浏览器不会给方法传递参数,需要的话,要到 window.event 中获取。...的父节点绑定监听器,然后利用 e.target 找到当前点击的 li,点击 li,事件会冒泡到 ul ,而 ul 上有注册事件,就会触发事件监听器。

    1.3K20

    前端基础-节点操作

    它接受一个布尔作为参数,表示是否同时克隆子节点,默认是false,即不克隆子节点。 注意: 不会克隆绑定到该元素的事件; node.innerHTML 返回该元素包含的 HTML 代码。...node.replaceChild(newChild, oldChild) 用指定的节点替换当前节点的一个子节点,返回被替换掉的节点。...,注册点击事件,添加事件处理函数 document.getElementById("btn").onclick = function () { //获取所有的p标签---根据标签名字来获取-...//根据id获取按钮,注册点击事件,添加事件处理函数 document.getElementById("btn").onclick = function () { //根据id获取图片标签....onclick = function () { //获取id为uu的ul中所有的li var list = getElementsByTagName("li"); //遍历

    4.3K10

    前端成神之路-WebAPIs03

    eventTarget.addEventListener()方法将指定的监听器注册到 eventTarget(目标对象),当该对象触发指定的事件时,就会执行事件处理函数。 ?...eventTarget.attachEvent()方法将指定的监听器注册到 eventTarget(目标对象) ,当该对象触发指定的事件时,指定的回调函数就会被执行。 ?...IE 提出从目标元素开始,然后一层一层向外接收事件响应,也就是冒泡型事件流。 Netscape(网景公司)提出从最外层开始,然后一层一层向内接收事件响应,也就是捕获型事件流。...鼠标触发事件的话,会得到鼠标的相关信息,鼠标位置。 键盘触发事件的话,会得到键盘的相关信息,如按了哪个键。...事件对象的兼容性处理 事件对象本身的获取存在兼容问题: 标准浏览器中是浏览器给方法传递的参数,只需要定义形参 e 就可以获取到。

    3K20

    事件高级

    IE 提出从目标元素开始,然后一层一层向外接收事件响应,也就是冒泡型事件流。 Netscape(网景公司)提出从最外层开始,然后一层一层向内接收事件响应,也就是捕获型事件流。 ​...鼠标触发事件的话,会得到鼠标的相关信息,鼠标位置。 键盘触发事件的话,会得到键盘的相关信息,如按了哪个键。...事件对象的兼容性处理 事件对象本身的获取存在兼容问题: 标准浏览器中是浏览器给方法传递的参数,只需要定义形参 e 就可以获取到。...在 IE6~8 中,浏览器不会给方法传递参数,如果需要的话,需要到 window.event 中获取查找。...只要“||”前面为true, 不管“||”后面是true 还是 false,都返回 “||” 前面的

    1.5K41
    领券