1. 程式人生 > 其它 >【JavaScript練習】建立留言板釋出留言

【JavaScript練習】建立留言板釋出留言

技術標籤:JavaScript練習javascript前端

【JavaScript練習】建立留言板釋出留言

執行結果
在這裡插入圖片描述
在這裡插入圖片描述

在這裡插入圖片描述
在這裡插入圖片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document<
/title> <style> * { margin: 0; padding: 0; } .msg { width: 300px; height: 200px; margin: 100px auto; position: relative; } button { position: absolute; top:
20%; right: 10px; } textarea { resize: none; outline: none; width: 250px; height: 100px; } li { background-color: pink; color: #e61515e7; font-size: 16px; margin-
bottom: 5px; padding-left: 10px; } </style> </head> <body> <!-- 釋出留言案例 --> <div class="msg"> <textarea name="" id="" cols="" rows="" placeholder="input msg..."></textarea> <button>釋出</button> <ul> </ul> <script> var text = document.querySelector('textarea'); var btn = document.querySelector('button'); var ul = document.querySelector('ul'); btn.onclick = function() { // 判斷內容是否為空 if (text.value == '') { alert('不能輸入空的留言內容'); } else { // 建立新留言 var li = document.createElement('li'); li.innerHTML = text.value; // 新增新留言 // ul.appendChild(li); ul.insertBefore(li, ul.children[0]); } } </script> </div> </body> </html>