<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style2.css"> </head> <body> <form class="comment" id="comment"> <label for="content">请留言:</label> <textarea name="content" id="content" cols="30" rows="5" placeholder="不要超过100个字符"></textarea> <button class="submit" type="button" name="submit">提交</button> </form> <ul class="list"> <!-- 当点击按钮时其实是删除“删除按钮的父节点” --> <!-- <li>hhhhh <button>删除</button></li> --> </ul> <script> // 1.拿到表单,comment代表当前留言的意思,拿到id属性 const comment = document.forms.comment; // 2.拿到文本域 const content = comment.content; // 3.能拿到提交按钮 const bth = comment.submit; // 4.拿到列表 const list = document.querySelector('.list'); // 5.查看 // console.log(comment,content,bth,list) // 给提交按钮添加一个点击事件 bth.onclick = ev =>{ // 用户提交的内容用value来表示,content文本域对象,用trim来过滤掉空格 let value = content.value.trim(); // 进行判断 if (value.length > 0 && value.length <= 100) { // 表示有内容了,将用户内容插入到列表中,最新的留言在最上面 // 创建一个li标签 const li = document.createElement('li'); // 往里赛内容 li.textContent=value; // 添加下边白色框高度为2 li.style.borderBottom='1px solid white'; li.style.minHeight='2em' li.style.display = 'flex'; // 使用 Flexbox 布局 li.style.alignItems = 'center'; // 垂直居中 li.style.justifyContent = 'space-between'; // 水平两端对齐 // 创建一个删除按钮 const delBth=document.createElement('button') // 创建名字 delBth.textContent = '删除留言'; delBth.style.float='right' delBth.classList.add('del-btn'); // 创建删除按钮的点击事件 delBth.onclick = function(){ // confir对话框,显示两个内容1.确定2.取消 if (confirm('是否删除?')){ // true:删除 // 如何获取父元素 // ths表示删除按钮,parentNode代表父元素 this.parentNode.remove(); // 用户反馈 alert('删除成功'); // 获取焦点 content.focus(); // 结束 return false; } } // 将删除按钮添加到<li>元素中 li.append(delBth); // 将新的留言项目放在列表顶部 list.prepend(li) alert('留言成功'); // 清空文本域 content.value=null; // content.value=''; // 将焦点放回到文本域 content.focus(); }else{ alert('没有输入或超出长度'); // 将焦点放回到文本域 content.focus(); // 结束 return false; } } </script> </body> </html>
标签:实战,comment,const,迷你,list,value,content,文本,留言板 From: https://www.cnblogs.com/QWD7986/p/18249603