JS 留言板

 <!-- 
         1-基本结构
         2- js逻辑
            分析有啥功能,就知道从哪下手  

            1-点击发布的按钮的时候,
            2-根据输入框的内容创建li标签,li里面还要有内容 p,button
            3-删除按钮 添加点击事件,点击的时候删除 按钮所在的li

      -->
      <input type="text" class="ipt">
      <input type="button" value="留言" class="sendBtn">
      <ul class="list">
          <li>
              <p>厉害 </p> 
              <button class="deleteBtn">删除</button>
          </li>
      </ul>
    <script>
        //1-
        let sendBtn = document.querySelector('.sendBtn');
        let ipt = document.querySelector('.ipt')
        let list = document.querySelector('.list')

        sendBtn.onclick = function(){
            console.log('点了发布')
            //2-创建li
            let newLi = document.createElement('li');

            // 创建p
            let oP = document.createElement('p');
            oP.innerHTML = ipt.value;
            newLi.appendChild(oP)

            // li添加到 list 里面
            list.appendChild(newLi)

            // 输入框清空
            ipt.value = '';

            // 创建删除按钮
            let deleteBtn = document.createElement('button');
            deleteBtn.innerHTML = '删除'
            deleteBtn.className='deleteBtn'
            newLi.appendChild(deleteBtn)


            deleteBtn.onclick = function(){
                this.parentNode.remove()
            }

            // let delBtns = document.querySelectorAll('.deleteBtn');
            // console.log(delBtns)
            // for(let i=0;i
            //     delBtns[i].onclick = function(){
            //         console.log(this.parentNode)
            //         this.parentNode.remove()
                    
            //     }
            // }

        }
        //针对页面加载完毕,已经有点删除按钮
        let delBtns = document.querySelectorAll('.deleteBtn');
        console.log(delBtns)
        for(let i=0;i<delBtns.length;i++){
            delBtns[i].onclick = function(){
                console.log(this.parentNode)
                this.parentNode.remove()
                
            }
        }

    </script> 
  <!-- 
         1-基本结构
         2- js逻辑
            分析有啥功能,就知道从哪下手  

            1-点击发布的按钮的时候,
            2-根据输入框的内容创建li标签,li里面还要有内容 p,button
            3-删除按钮 添加点击事件,点击的时候删除 按钮所在的li

      -->
      <input type="text" class="ipt">
      <input type="button" value="留言" class="sendBtn">
      <ul class="list">
          <li>
              <p>厉害 </p> 
              <button class="deleteBtn">删除</button>
          </li>

          

      </ul>
    <script>
        //1-
        let sendBtn = document.querySelector('.sendBtn');
        let ipt = document.querySelector('.ipt')
        let list = document.querySelector('.list')

        sendBtn.onclick = function(){
            console.log('点了发布')
            // 拼字符串
            // 模板
            let str = `
            
  • ${ipt.value}

  • `
    list.innerHTML = list.innerHTML + str; //针对页面加载完毕,已经有点删除按钮 let delBtns = document.querySelectorAll('.deleteBtn'); console.log(delBtns) for(let i=0;i<delBtns.length;i++){ delBtns[i].onclick = function(){ console.log(this.parentNode)//点击id按钮对应的li this.parentNode.remove() } } } //针对页面加载完毕,已经有点删除按钮 let delBtns = document.querySelectorAll('.deleteBtn'); console.log(delBtns) for(let i=0;i<delBtns.length;i++){ delBtns[i].onclick = function(){ console.log(this.parentNode) this.parentNode.remove() } } </script>
     <body>
         <!-- 
             1-基本结构
             2- js逻辑
                分析有啥功能,就知道从哪下手  
    
                1-点击发布的按钮的时候,
                2-根据输入框的内容创建li标签,li里面还要有内容 p,button
                3-删除按钮 添加点击事件,点击的时候删除 按钮所在的li
    
          -->
          <input type="text" class="ipt">
          <input type="button" value="留言" class="sendBtn">
          <ul class="list">
              
    
              
    
          </ul>
        <script>
    
            //1-
            let sendBtn = document.querySelector('.sendBtn');
            let ipt = document.querySelector('.ipt')
            let list = document.querySelector('.list')
    
            //1-数据  转为 页面的html结构      查
            //2- 留言的时候 更改数据    数组中添加对象,render页面   增
            //3- 删除留言  数组中删除对象,render页面      删
    
            let arr = [
                {
                    title:'今天天气很好!',
                    date:'2020-06-07T19:18:06.124Z'
    
                },//一个对象就是一条留言
                {
                    title:'今天的真热!',
                    date:'2020-06-06T19:18:06.124Z'
    
                }
    
            ]
            // 数据  转为 页面的html结构
            // 循环遍历 arr 数组, 根据数组中内容  去拼字符串
            // let html = '';
            // for(let i=0;i
            //     let obj = arr[i]
            //     console.log(obj)
            //     //每个留言的obj 都要 产生一个 li
            //     html += `
            //         
  • ${obj.title}
  • // ` // } // console.log(html) // //将拼好的字符串放在 ul里面 // list.innerHTML = html render() //渲染 -跟数据转为页面 // 封装函数 一段代码要多次调用或者 将大段的代码 拆成几个函数 function render(){ let html = ''; for(let i=0;i<arr.length;i++){ let obj = arr[i] console.log(obj) //每个留言的obj 都要 产生一个 li html += `
  • ${obj.title} ${obj.date}
  • `
    } console.log(html) //将拼好的字符串放在 ul里面 list.innerHTML = html //3-删除留言 给删除按钮加事件 let delBtns = document.querySelectorAll('.deleteBtn'); console.log(delBtns) for(let i=0;i<delBtns.length;i++){ delBtns[i].onclick = function(){ console.log(this.parentNode) // this.parentNode.remove() console.log(arr) // 删除数组中 留言对应的对象 console.log(i) arr.splice(i,1) console.log(arr) // 渲染页面 render() } } // { // let i=0; // delBtns[i].οnclick= function(){ // console.log(i)//0 // } // } // { // let i=1; // delBtns[i].οnclick= function(){ // console.log(i)//1 // } // } } sendBtn.onclick = function(){ //2 - 留言的时候更改数据, 往数组中添加对象 let now = new Date() let o = { title:ipt.value, date:now.toString() } console.log(o) arr.push(o) console.log(arr); //重复1 将数据转为 html结构 // let html = ''; // for(let i=0;i // let obj = arr[i] // console.log(obj) // //每个留言的obj 都要 产生一个 li // html += ` //
  • ${obj.title}
  • // ` // } // console.log(html) // //将拼好的字符串放在 ul里面 // list.innerHTML = html render() } </script>

    你可能感兴趣的:(代码)