js之留言板实例

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>留言板</title>
    <link rel="stylesheet" href="style2.css">
  </head>
  <body>
    <form class="comment" id="comment">
        <label for="content">请留言:</label>
        <textarea class="content" name="content" id="content" cols="30" rows="5" placeholder="不要超过100个字符"></textarea>
        <button class="submit" type="button" name="submit">提交</button>
      </form>
      <!-- <button class="reg">事件注册</button> -->
        <ul class="list">
        </ul>
        <script>
        //  reg.forEach(function (an){
        //     console.log(an.classList);
        //  });
        //  reg.forEach(an => {
        //      an.addEventListener('click',() => {
        //          console.log(an.className)
        //          console.log(an.classList)
        //      })
        //  });
         //留言板
         const btn = document.querySelector('button');
         const ul = document.querySelector('ul');
         const tx = document.querySelector('.content');
         btn.addEventListener('click',()=>{
             if(tx.value.length > 0 && tx.value.length <= 100){
                //提交留言
                let li = document.createElement('li');
                li.style.borderBottom = '1px solid white';
                li.style.minHeight = '3em'
                li.textContent = tx.value;
                //删除留言
                const delbtn = document.createElement('button');
                delbtn.textContent = "删除留言";
                delbtn.style.float = 'right'
                delbtn.classList.add('del-btn');
                delbtn.onclick = function (){
                    if(confirm('是否删除该留言？')){
                        this.parentNode.remove();
                        alert('删除成功！')
                        return false;
                    }
                };
                ul.prepend(li);
                li.append(delbtn);
                tx.value = null;
             }else {
                 alert("留言字符至少1个字符，最大100个字符")
             }
         });
        </script>
  </body>
</html>
js之留言板实例

js之留言板实例

更多相关文章

随机推荐
