利用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>

最后看一看效果：
没有输入评论时：
在这里插入图片描述
输入评论并点击发表：

点击修改：

点击删除就会将这条评论删掉

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

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

悦读