网页开发中，用户交互至关重要。例如，用户点击列表项（<li>标签），我们需要获取其内容并执行相应操作。本文演示如何用JavaScript获取点击<li>元素的内容，并将其传递给自定义函数。
假设我们有一个简单的HTML列表：
<ul id="test"> <li>glen</li> <li>tane</li> <li>john</li> <li>ralph</li> </ul>
目标：点击任意<li>元素，获取其文本内容，并作为参数传递给函数。
以下JavaScript代码实现此功能：
立即学习“Java免费学习笔记（深入）”；
window.onload = function() {
let listItems = document.getElementById("test").getElementsByTagName("li");
for (let i = 0; i < listItems.length; i++) {
listItems[i].onclick = function() {
let value = this.innerHTML;
myFunction(value);
};
}
};
function myFunction(value) {
console.log("Clicked item content:", value);
// 在这里添加你需要的操作
}这段代码首先获取所有<li>元素，然后遍历每个元素，添加onclick事件监听器。点击<li>元素时，this.innerHTML获取其文本内容，赋值给value变量，再传递给myFunction函数处理。myFunction是一个占位函数，你可以根据实际需求添加所需操作。示例中，我们简单地将值打印到控制台，你可以替换成任何你需要的操作。
以上就是JavaScript中如何获取点击列表项的内容并使用？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
435
收藏
