发布留言--js案例

最新推荐文章于 2023-11-01 22:28:13 发布

奇葩之小王子

最新推荐文章于 2023-11-01 22:28:13 发布

阅读量125

点赞数

文章标签： js html

本文链接：https://blog.csdn.net/qq_52138438/article/details/114982297

版权

发布留言–js案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li{
            background-color: pink;
            list-style: none;
        }
        li a{
            float: right;
        }
    </style>
</head>
<body>
    <textarea name="" id="txt" cols="30" rows="10">赶快来评论吧</textarea>
    <button>发布</button>
    <ul>
    </ul>
    <script>
        var btn = document.querySelector('button');
        var text = document.querySelector('textarea');
        var ul = document.querySelector('ul');
        btn.onclick = function(){
            if(text.value == '')
            {
                alert('你没有输入内容');
                return false;
            }else{
                //1.创建元素
                var li = document.createElement("li");
                //先有li 才能赋值
                li.innerHTML = text.value + "<a href = 'javascript:;'>删除</a>";//javascript:; 阻止链接跳转
                //ul.appendChild(li);
                //2.添加元素
                ul.insertBefore(li,ul.children[0]);
                //3.删除元素 删除的是当前链接的li 它的直接父级
                var as = document.querySelectorAll('a');
                for(var i = 0;i<as.length;i++){
                    as[i].onclick = function(){
                        //删除的是 li 当前a所在的li
                        ul.removeChild(this.parentNode);
                    }
                }
            }
           
        }
        text.onclick = function(){
            if(text.value == '赶快来评论吧')
            {
                text.value = '';
            }
        }
        text.onblur = function(){
            if(text.value == '')
            {
                text.value = '赶快来评论吧';
            }
        }
    </script>
</body>
</html>

通过引入新标签并把键入值传给它，达到留言效果，删除操作要给每个a绑定事件

奇葩之小王子

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
发布留言--js案例

发布留言–js案例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <ti
复制链接

扫一扫