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:
|
<<: Docker MQTT installation and use tutorial
>>: Introduction to Jenkins and how to deploy Jenkins with Docker
Recommend
Pure CSS to adjust Div height according to adaptive width (percentage)
Under the requirements of today's responsive ...
Docker data volume container creation and usage analysis
A data volume container is a container specifical...
Why are the pictures on mobile web apps not clear and very blurry?
Why? The simplest way to put it is that pixels are...
MySQL practical skills: analysis of methods to compare whether two tables have different data
This article uses an example to describe how MySQ...
Ten popular rules for interface design
<br />This is an article I collected a long ...
foreman ubuntu16 quick installation
Quickstart Guide The Foreman installer is a colle...
Detailed graphic description of the database installation process of MySQL version 5.7.24
MySQL is the most popular relational database man...
Overview of the basic components of HTML web pages
<br />The information on web pages is mainly...
Detailed explanation of Vue mixin
Table of contents Local Mixin Global Mixins Summa...
Example of how to upload a Docker image to a private repository
The image can be easily pushed directly to the Do...
Analysis of the advantages and disadvantages of MySQL stored procedures
MySQL version 5.0 began to support stored procedu...
Analysis of MySQL lock wait and deadlock problems
Table of contents Preface: 1. Understand lock wai...
Our thoughts on the UI engineer career
I have been depressed for a long time, why? Some t...
Detailed explanation of axios encapsulation and API interface management in React project
Table of contents Preface Install Introduction Sw...
MySQL 5.7.17 and workbench installation and configuration graphic tutorial
This article shares the installation and configur...