js实现留言板功能的简单逻辑

拂晓等明月

已于 2023-07-25 14:38:50 修改

阅读量527

点赞数 1

分类专栏： javascript练习文章标签： javascript 开发语言

于 2023-07-25 14:38:36 首次发布

本文链接：https://blog.csdn.net/qq_61320547/article/details/131917470

版权

javascript练习专栏收录该内容

20 篇文章 0 订阅

订阅专栏

详细注释，练习代码，仅供参考

<!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>
      a {
        margin-left: 50px;
      }
    </style>
  </head>
  <body>
    <div>
      <textarea></textarea>
      <button class="but">评论：</button>
      <button class="butt">删除评论</button>
      <ul></ul>
    </div>
    <script>
      // 1.获取元素
      let text = document.querySelector('textarea')
      let but = document.querySelector('.but')
      let butt = document.querySelector('.butt')
      let ul = document.querySelector('ul')
      // 2.处理事件
      but.onclick = function () {
        //6. 筛查空白字符
        if (text.value == '') {
          alert('未输入内容')
          return false
        } else {
          // 3.创建元素节点
          let li = document.createElement('li')
          // 4.将创建的元素赋值 + 9.添加时加入删除功能
          li.innerHTML = text.value + "<a href='javascript:;'>删除</a>"
          // 5.添加元素节点,
          ul.insertBefore(li, ul.children[0])

          // 8.点击提交按钮也清空文本框
          text.value = ''
          // 10.添加功能
          // 删除 .removechild(child)
          // a的父亲是li,要删除的也是li
          // 给a绑定点击事件，a可能有多个，用for循环添加事件
          // 获取元素
          let a = document.querySelectorAll('a')
          // 11.添加事件
          for (let i = 0; i < a.length; i++) {
            a[i].onclick = function () {
              // 12.删除的是当前a所在的li   a[i].parentNode:当前的元素的父级
              // li是ul的儿子，删除儿子需要父级，
              ul.removeChild(a[i].parentNode)
            }
          }
        }
      }

      butt.onclick = function () {
        if (ul.children.length == 0) {
          alert('没评论了')
          this.disabled = true
          return false
        } else {
          ul.removeChild(ul.children[0])
        }
      }
    </script>
  </body>
</html>