實戰迷你留言板學習

宋霸霸發表於2024-06-15
<!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>

　　

相關文章