JS做简单的留言板

Posted 2021-03-04 彩虹更新中

 留言板实现功能：

1.把文本框里面的留言发表显示出来；

2.显示出来的留言右侧有一个删除链接或按钮

3.点击删除可以把本条留言删除。

为了防止链接跳转，把a的href改成了‘javascript:;‘，注意有一个：哦！

 

<textarea name="" id="text1" cols="30" rows="10"></textarea>

    <button>评论</button>

    <ul></ul>

    <script>

        var text = document.getElementById(‘text1‘)

        var btn = document.querySelector(‘button‘)

        var ul = document.querySelector(‘ul‘)

        btn.onclick = function() {

            if (text.value == ‘‘) {

                alert(‘您输入的内容为空‘);

                return false;

            } else {

                message = text.value + ‘<a href="javascript:;"> 删除评论 </a>‘;

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

                li.innerhtml = message;

                ul.insertBefore(li, ul.children[0])

                var as = document.querySelectorAll(‘a‘);

                //需要把a的事件添加在创建的下面，如果单独出去定义，就没法实现a的这个事件了

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

                    as[i].onclick = function() {

                        // node.removeChild(child); 删除的是 li 当前a所在的li  this.parentNode;

                        ul.removeChild(this.parentNode);

                    }

                }

            }

        }