JS做简单的留言板

2021-04-03 23:25

阅读:516

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

 留言板实现功能:
1.把文本框里面的留言发表显示出来;
2.显示出来的留言右侧有一个删除链接或按钮
3.点击删除可以把本条留言删除。
为了防止链接跳转,把a的href改成了‘javascript:;‘,注意有一个:哦!
 
    
    
        
            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 + ‘ 删除评论 ‘;
                    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[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


    评论


    亲,登录后才可以留言!