JS implementation of simple message board effects

Time:2021-3-5

This example for you to share the JS message board effect specific code, for your reference, the specific content is as follows

Knowledge points

1. Large textarea input box
2. Value gets the value of the input box
3. InnerHTML; innerText text
4. InsertBefore insert before a label

Operation effect

code

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
  *{margin: 0;padding: 0;list-style: none;}
  #box{width: 800px;border: 1px solid #ccc;
   margin:100px auto;padding: 20px}
  #my_textarea{width: 80%;height: 120px;font-size: 20px}
  .box-top{margin-bottom: 20px;}
  #ul li{border-bottom: 1px dashed #ccc;color: red;line-height: 44px}
  #ul li a{float: right;}
 </style>
</head>
<body>
<div>
 <div>
  <label for="my_ Textarea "> comment
   <textarea name="my_textarea" cols="30" rows="10"></textarea>
  </label>
  < button > published
 </div>
 <ul></ul>
</div>
<script>
 window.addEventListener('load',function (ev) {
  $('btn').addEventListener('click',function (ev1) {
   var my_textarea = $('my_textarea');
   //1. Get the content in the input box
   var content = my_textarea.value;

   //2. Judgment
   if (content.length===0){
    Alert ('Please enter the content of the comment ');
    return;
   }

   //3. Create Li label
   var li = document.createElement('li');
   var ul = $('ul');
   li.innerHTML  =Content + '< a = "javascript:;" rel = "external nofollow" > delete < / a >'
   ul.insertBefore(li,ul.children[0]);

   //4. Clear the input box
   my_textarea.value = '';
   
   //5. Delete comments
   var remove = ul.getElementsByTagName('a');
   for (var i = 0; i < remove.length; i++) {
    var r = remove[i];
    r.addEventListener('click',function (evt) {
     this.parentNode.remove();
    })
   }
  });



  /**
   *Returns the label element according to the ID
   * @param {string}id
   * @returns {any}
   */
  function $(id) {
   return typeof id === 'string' ? document.getElementById(id) : null;
  }
 })
</script>
</body>
</html>

The above is the whole content of this article, I hope to help you learn, and I hope you can support developer more.