Table of contents

1. Case description:

Make a simple message board using JavaScript, css and html

It is required to enter some text in the page text box, click the "Submit" button, and the entered text and the current message time will be displayed below, re-enter some text, and then click Submit, and the newly released content will be displayed at the bottom above. Click Delete to delete the submitted message.

[Case Analysis] Use the knowledge of creating, adding and deleting nodes to complete a simple message board function. In the page, click the "Submit" button to dynamically create a li element and add it to the ul.

2. HTML part

There are mainly a text box, a submit button, and a ul list showing the message section.

<div id="mgs">
        <textarea id="text"></textarea><br>
        <input type="button" id="btn" value="提交">
        <ul class="list"></ul>
    </div>

3. css part

    * {
        margin: 0;
        padding: 0;
    }

    #mgs {
        width: 400px;
        color: black;
        font-style: italic;
        border-width: 5px;
        margin: 0 auto;
    }

    #text {
        width: 400px;
        height: 150px;
        padding: 20px;
        font-size: 20px;
    }

    li {
        list-style: none;
        border-bottom: 1px solid #999;
        line-height: 20px;
        margin-top: 30px;
    }

    span {
        float: right;
    }

Clear the default style, set the style of the text box (black font, italic, center in the browser, font size, padding), remove the default list style, span is mainly used to wrap the current message time.

4. js code

Get the button element, get the ul list element, get the text box element

            var btn = document.getElementById('btn');

            var list = document.querySelector('.list');

            var text = document.getElementById('text');

Binding button click event:

When there is no input in the text box, click Submit and the browser prompts "You have not entered any content",

  btn.onclick = function () {

                if (text.value == '') {

                    alert('你没有输入内容。')

                } else {

After entering the content, create a li element node, enter the text box content and current time and a delete button in li.li.innerHTML, add li to ul, and clear the input content in the text box.

 var li = document.createElement('li');

 li.innerHTML = text.value + '<span>' + mytime + '\t' + '<button>删除</button></span>'

 text.value = '';

 list.insertBefore(li, list.children[0]);

Get the time of the current input content

var time = new Date();

var mytime = time.getFullYear() + '-' + (time.getMonth() + 1) + '-' + time.getDate();
 
li.innerHTML = text.value + '<span>' + mytime + '\t' + '<button>删除</button></span>';

Bind the click delete event to the delete button. Get all the button buttons, when the button button is clicked, delete the li (delete the parent node of the parent node of the button button)

   var allB = document.querySelectorAll('button');

                    for (var i = 0; i < allB.length; i++) {

                        allB[i].onclick = function () {

                            list.removeChild(this.parentNode.parentNode);

                        }

5. All codes

<!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>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    #mgs {
        width: 400px;
        color: black;
        font-style: italic;
        border-width: 5px;
        margin: 0 auto;
    }

    #text {
        width: 400px;
        height: 150px;
        padding: 20px;
        font-size: 20px;
    }

    li {
        list-style: none;
        border-bottom: 1px solid #999;
        line-height: 20px;
        margin-top: 30px;
    }

    span {
        float: right;
    }
</style>

<body>
    <div id="mgs">
        <textarea id="text"></textarea><br>
        <input type="button" id="btn" value="提交">
        <ul class="list"></ul>
    </div>
        <script>
            var btn = document.getElementById('btn');
            var list = document.querySelector('.list');
            var text = document.getElementById('text');
            btn.onclick = function () {
                if (text.value == '') {
                    alert('你没有输入内容。')
                } else {
                    var li = document.createElement('li');
                     var time = new Date();
                    var mytime = time.getFullYear() + '-' + (time.getMonth() + 1) + '-' + time.getDate();
                    li.innerHTML = text.value + '<span>' + mytime + '\t' + '<button>删除</button></span>';
                    text.value = '';
                    list.insertBefore(li, list.children[0]);
                    var allB = document.querySelectorAll('button');
                    for (var i = 0; i < allB.length; i++) {
                        allB[i].onclick = function () {
                            list.removeChild(this.parentNode.parentNode);
                        }
                    }

                }
            }
        </script>
</body>

</html>