js implements publishing and editing of similar comments

Idea:

1. There is a text area box with a width of 600 and a height of 400. The border is 1 pixel solid black. The text area box does not allow the user to zoom in and out.

2. There is a button with the text: Post a comment

3. Click the button to get the content input by the user and display it in the ul li tag below (get a content and create a li tag),

The li tag width is 600, the height is 60, and the text is vertically centered; if the user does not enter content, a warning box will pop up when clicking the button: Please enter the content you want to comment.

4. In the li tag, the left side is the content of the comment, and the right side is the modification and deletion buttons. Modify is the button, and delete is the a tag. Click delete to delete the comment;

Click Modify and an input box will pop up to enter the modified content and update the current comment with the modified content.

Rendering:

Complete code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>微博评论</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

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

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

        textarea {
            width: 600px;
            height: 280px;
            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;
        }
    </style>
</head>

<body>
    <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>
    </div>
    <!-- js部分 -->
    <script>
        //获取元素
        var txt = document.getElementById('txt')
        var btn = document.getElementById('btn')
        var utxt = document.getElementById('utxt')
        //添加点击按钮事件
        btn.onclick = function () {
            if (txt.value == 0) {
                alert('请输入您想要评论的内容')
            } else {
                var li = document.createElement('li')
                utxt.appendChild(li)
                li.innerHTML = txt.value + "<a href='javascript:;'>删除</a>" + "<input type='button' value='编辑'>"
                txt.value = ''
            }
            // console.log(li);
            //编辑
            var giao = document.querySelectorAll('input')
            for (var i = 0; i < giao.length; i++) {
                giao[i].onclick = function () {
                    li.innerHTML = prompt('请输入您修改后的内容') + "<a href='javascript:;'>删除</a>" +
                        "<input type='button' value='编辑'>"
                }
            }

            //删除
            var del = document.querySelectorAll('a')
            for (var i = 0; i < del.length; i++) {
                del[i].onclick = function () {
                    // console.log(this);
                    utxt.removeChild(this.parentNode)
                }
            }

        }
    </script>
</body>

</html>

js implements publishing and editing of similar comments

Guess you like