JavaScript to achieve a simple message board case

JavaScript to achieve a simple message board case

Use Javascript to implement a message board example (with message deletion) for your reference. The specific content is as follows

I am still learning the big front end. Please forgive me if there are any irregularities or incorrect ideas in the code. Thank you for your advice.

In the discussion area of ​​some websites, we can usually see the message board function. Then when users comment, empty comments cannot be posted. The latest comments will be displayed, and the old comments will be pushed down. Then the blogger can delete the comments.

The code is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
 * {
 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 {
 list-style: none;
 width: 300px;
 padding: 5px;
 background-color: rgb(245, 209, 243);
 color: red;
 font-size: 14px;
 margin: 15px 0;
 }

 li a {
 float: right;
 text-decoration: none;
 }
 </style>
</head>
<body>
<textarea name="" id=""></textarea>
<button>Publish</button>
<ul>

</ul>
<script>
 var btn = document.querySelector('button')
 var textarea = document.querySelector('textarea')
 var ul = document.querySelector('ul')
 btn.onclick = function () {
 if (textarea.value == '') {
 alert('Ning has no input')
 return false
 }else{
 var li = document.createElement('li')
 li.innerHTML=textarea.value+"<a href='javascript:;'>Delete</a>"
 ul.insertBefore(li,ul.children[0])
 var as=document.querySelectorAll('a')
 for (var i=0;i<as.length;i++){
 as[i].onclick=function () {
  ul.removeChild(this.parentNode)
 }
 }
 }
 }
</script>
</body>
</html>

Effect display

When comment is empty:

New comments will push old comments down:

When deleting:

Code Explanation

Here, when the button click event is triggered, the content in the text field is obtained, the function is triggered, and a judgment is made first to determine whether the value of the text field is empty. If so, a warning box pops up and the text content is not displayed below.

If the text box has content, then create an element li and use li to receive '. Then set the text content in li to the content of 1 in the text area + a tag (delete function).

Then set the newly added li to be displayed in the front, which is insertbefore. Then we need to bind the a tag in a loop, so that the row will be deleted when the a tag is clicked.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:
  • JS realizes message board function
  • jsp message board source code three: for jsp beginners.
  • How to use DOM operations to implement a simple message board in js
  • JS+CSS simulates a message board instance that can display content without refreshing
  • JS realizes the message board function [floor effect display]
  • Foldable message board implemented by js (with source code download)
  • jsp message board source code 2: for jsp beginners.
  • My ajax message board source code good application js
  • Code example of writing a message board using ReactJS and Python's Flask framework
  • jsp message board source code 1: for jsp beginners.

<<:  Docker MQTT installation and use tutorial

>>:  Introduction to Jenkins and how to deploy Jenkins with Docker

Recommend

Vue codemirror realizes the effect of online code compiler

Preface If we want to achieve the effect of onlin...

CSS and CSS3 flexible box model to achieve element width (height) adaptation

1. CSS realizes fixed width on the left and adapt...

How to use history redirection in React Router

In react-router, the jump in the component can be...

Docker uses a single image to map to multiple ports

need: The official website's resource server ...

What is COLLATE in MYSQL?

Preface Execute the show create table <tablena...

Sublime Text - Recommended method for setting browser shortcut keys

It is common to view code effects in different br...

Implementation of two basic images for Docker deployment of Go

1. golang:latest base image mkdir gotest touch ma...

Detailed explanation of MySQL covering index

concept If the index contains all the data that m...

Analysis of the Principle and Function of MySQL Database Master-Slave Replication

Table of contents 1. Database master-slave classi...

Vue implements drag and drop or click to upload pictures

This article shares the specific code of Vue to a...

Implementing countdown effect with javascript

Use Javascript to achieve the countdown effect, f...

Solution to HTML encoding problem in IE6 that causes JS error and CSS not being applied

It was found in the test that when the page defini...

Detailed description of the use of advanced configuration of Firewalld in Linux

IP masquerading and port forwarding Firewalld sup...

Solution to the problem that MySQL commands cannot be entered in Chinese

Find the problem Recently, when I connected to th...

Detailed explanation of MySQL master-slave replication read-write separation construction

MySQL master-slave setup MySQL master-slave repli...