码迷,mamicode.com
首页 > Web开发 > 详细

JS做简单的留言板

时间:2020-03-20 17:00:02      阅读:91      评论:0      收藏:0      [点我收藏+]

标签:false   remove   ext1   sel   java   his   message   ESS   跳转   

 留言板实现功能:
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);
                    }
                }
            }
        }

JS做简单的留言板

标签:false   remove   ext1   sel   java   his   message   ESS   跳转   

原文地址:https://www.cnblogs.com/rainbowupdate/p/12532572.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!