html中如何获取点击后<li>标签里的内容值

Question

html中如何获取点击后<li>标签里的内容值

<ul id="test">
    <li>Glen</li>
    <li>Tane</li>
    <li>John</li>
    <li>Ralph</li>
</ul>

<script>
window.onload = function(){
    var obj_lis = document.getElementById("test").getElementsByTagName("li");
    for(i=0;i<obj_lis.length;i++){
        obj_lis[i].onclick = function(){
            alert(this.innerHTML);
        }
    }
}
</script>

这是在网上看的案例.我是想要获得点击li后，获得此li标签的值 ，让这个值生成一个函数 可以调用这个值

Answer 1

window.onload = function(){
var obj_lis = document.getElementById("test").getElementsByTagName("li");

for(i=0;i<obj_lis.length;i++){
        obj_lis[i].onclick = function(){
            let val = this.innerHTML;
           //  获取到值后，在这里调用即可
        }
    }
}

已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ，欢迎正在阅读的你也加入。

Answer 2

来看看这个

写在 JSBin 上的示例

代码说明（注释）

window.onload = function () {
    document.getElementById("test").addEventListener(
        "click",
        e => {
            // 有可能是点在 UL 上，所以这里要先过滤，确保是点在 LI 上
            if (!/li/i.test(e.target.tagName)) {
                return;
            }

            // 产生函数容易，但是要把函数放在一个外面可以调用的地方
            // 这里选择挂在 window 对象上
            window.getContent = () => e.target.innerText;
        }
    );

    document.getElementById("clickMe").addEventListener(
        "click",
        () => {
            // 如果没有 getContent，说明没点过 LI
            // 如果有，调用就可以拿到刚才点的那个 LI 的文本
            if (window.getContent) {
                alert(window.getContent());
            } else {
                alert("先点个 LI");
            }
        }
    );
}

已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ，欢迎正在阅读的你也加入。

Answer 3

你先要纠正自己的思路。php是运行在服务端的脚本，html对于php来说只是输出的字符串而已，这个字符串被浏览器接收后，浏览器将其展示为网页。所以网页内容是在客户端而不是服务端的，click也是客户端行为，所以php侧不可能直接拿到该数据，需要象表单提交一样发送后端请求才行。

//a.php
<script>
function send(text) {
    fetch(`b.php?text=${text}`).then(res => console.log(res)); //发送Hi，得到“你提交的是Hi”的反馈。
}
</script>
<ul>
    <li onclick="send(this.innerHTML)">Hi</li>
</ul>

//b.php
<?php
$request = $_REQUEST['text'];
echo "你提交的是$request";
?>

已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ，欢迎正在阅读的你也加入。