js实现留言板功能

基本步骤

1. 获取元素
2. 给发布按钮添加点击事件
3. 获取输入框中的值
4. 添加判断条件,如果为空弹出请输入内容
5. 把留言的内容渲染到页面
6. 发送后清除留言板的内容

基本的HTML和CSS结构

 * {
        margin: 0;
        padding: 0;
    }
    
    body {
        padding: 100px;
    }
    
    textarea {
        width: 200px;
        height: 100px;
        border: 1px solid pink;
        outline: none;
        resize: none;
    }
    
    ul {
        margin-top: 50px;
    }
    
    li {
        width: 300px;
        padding: 5px;
        background-color: rgb(245, 209, 243);
        color: red;
        font-size: 14px;
        margin: 15px 0;
    }
    
    li a {
        float: right;
    }

 <textarea name="" id="writeArea"></textarea>
    <button>发布</button>
    <ul>

    </ul>

var text = document.querySelector("#textarea");
      var btn = document.querySelector("button");
      var ul = document.querySelector("ul");

      btn.onclick = function () {
        //   获取textarea的值
        var val = text.value;
        // 如果值为空不添加
        if (val == "") {
          alert("请先输入内容");
          //   函数里面终止用return，break在函数外用
          return;
        }
        // 创建一个li
        var li = document.createElement("li");
        // 让li的值等于textarea的值
        li.innerText = val;
        // 把li增加到ul里面,插入到第一行
        ul.insertBefore(li, ul.children[0]);
        // 添加内容之后内容清空
        text.value = "";
      };