利用JavaScript实现发表、修改、删除评论

要用js实现这些功能,首先我们分析一下需要做什么
1.再文本框写评论
2.创建一个能储存写好的评论的地方,我们一般用无序列表li来储存
3.li不能让它固定,所以我们也需要用js来动态创建
4.肯定要在已经发布的评论哪里删除,也就是说,再创建的li中在创建两个按钮
那么大致的html就只需要创建一个文本框和一个发表评论的按钮就够了,为了方便,ul也可以先创建好:

<div class="bigBox w">
        <textarea name="" id="txt" cols="30" rows="10"></textarea>
        <div class="btnBox">
            <button id="btn">发布评论</button>
        </div>
        <ul id="utxt">

        </ul>

然后我们用css美化一下,这里我们虽然没有创建储存评论的li标签以及修改删除按钮,但是可以先将它的css写好:

<style>
        * {
            margin: 0;
            padding: 0;
        }

        .w {
            width: 600px;
            margin: 0 auto;
        }

        .bigBox {
            width: 600px;
            margin-top: 20px;
        }

        textarea {
            width: 600px;
            height: 100px;
            border: 0;
            outline: 0;
            border: 1px solid black;
            resize: none;
            padding: 20px;
            box-sizing: border-box;
        }

        .btnBox {
            width: 100%;
            height: 40px;
            position: relative;
        }

        #btn {
            display: block;
            width: 100px;
            height: 40px;
            position: absolute;
            right: 0;
            background-color: #FF7D40;
            border: 0;
            color: #fff;
        }

        ul li {
            width: 600px;
            height: 60px;
            line-height: 60px;
            background-color: #3c3c3c;
            color: #fff;
            margin-top: 10px;
            padding: 0 20px;
            list-style: none;
            box-sizing: border-box;
        }

        ul li a {
            float: right;
            text-decoration: none;
            color: #fff;
        }

        ul li input {
            float: right;
            margin: 20px 16px 0 0;
        }

看看效果:
在这里插入图片描述
接下来写JavaScript代码来实现它的功能:

<script>
        //通过id获取标签
        var txt = document.getElementById("txt")
        var btn = document.getElementById("btn")
        var utxt = document.getElementById("utxt")
        //创建点击事件
        btn.onclick = function () {
            //判断是否输入了评论
            if (txt.value === "") { //这个表达式表示没有文本输入
                alert("请输入评论") //弹窗提醒
            } else { //如果有文本输入就执行下面的代码
                //创建li标签
                var li = document.createElement("li")
                //将输入的内容赋给li
                li.innerText = txt.value
                //同时清空输入框
                txt.value = ""
            }
            //将li标签放入ul标签中
            utxt.appendChild(li)
            //创建删除按钮,用a标签来创建
            var del = document.createElement("a")
            //给a标签属性
            del.href = "#"
            del.innerHTML = "删除"
            //删除按钮的点击事件
            del.onclick = function () {
                //删除自己的父元素,也就是删除按钮所在的li
                del.parentNode.remove()
                txt.value = ""
            }
            //将删除按钮放入li中
            li.appendChild(del)
            //创建修改按钮
            var xg = document.createElement("input")
            xg.type = "button"
            xg.value = "修改"
            // var box = document.createElement("input")
            xg.onclick = function () {
                //点击修改后弹出输入框,并且将文本内容赋给li
                var i = prompt("请输入修改的内容")
                this.parentNode.innerText = i
                //重新添加删除修改按钮
                li.appendChild(del)
                li.appendChild(xg)
            }
            //给li添加修改按钮
            li.appendChild(xg)
        }
    </script>

最后看一看效果:
没有输入评论时:
在这里插入图片描述
输入评论并点击发表:
在这里插入图片描述
点击修改:
在这里插入图片描述
在这里插入图片描述
点击删除就会将这条评论删掉

这样我们就实现了评论的发表修改及删除了

  • 14
    点赞
  • 74
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值