用javascript实现留言板功能。要求:点击提交按钮,讲输入框中文字添加到显示留言下,并清空文本框;点击删除,将添加的姓名与内容以及删除按钮都删除。js

用JavaScript实现留言板功能,要求:点击提交按钮,讲输入框中文字添加到显示留言下,并清空文本框;点击删除,将添加的姓名与内容以及删除按钮都删除。

  • CSS样式
<style>
        *{
            margin: 0;
            padding: 0;
        }
       .box{
           width: 500px;
           border: 1px solid red;
           margin: 0 auto;
           
       }
       .review{
           height: 250px;
           background-color: blanchedalmond;
       }
       #uu{
           background-color: cyan;
       }
       #uu li{
           list-style: none;
       }
    </style>
  • body内容
<!-- 点击提交,将输入框文中添加到显示留言下,并清空文本框 -->
    <div class="box">
        <div class="review">
        姓名:<input type="text" id="names"><br>
        内容:<textarea name="" cols="30" rows="10" id="concent"></textarea>
        &emsp;&emsp;<button onclick="add()">提交</button>
        </div>
        <div class="show">
        <h3>显示留言</h3><br>
        <ul id="uu">
            <li>
                张三
                <p>我要好好工作<a href="#" onclick="del(this)">删除</a></p>
            </li>
        </ul>
    </div>
</div>
  • script部分
<script>
        //获取元素
        var use = document.getElementById('names');
        var concent = document.getElementById('concent');
        var uu = document.getElementById('uu');

        //显示用户输入内容
        function add(){
            if(use.value == '' || concent.value == ''){
                alert('请输入内容');
                return;
            }

            //创建一个元素li
            var li = document.createElement('li');
            //给添加用户输入的内容
            li.innerHTML = use.value + '<p>' + concent.value + '<a href="#" οnclick="del(this)">删除</a>';
            uu.appendChild(li);

            use.value = '';
            concent.value = '';
        }
        //this指得是当前对象
        function del(e){
            e.parentElement.parentElement.remove();
        }
        
    </script>
  • 0
    点赞
  • 0
    评论
  • 5
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值