JavaScript实现留言板添加删除留言

下面是“JavaScript实现留言板添加删除留言”的完整攻略：

1. 创建HTML页面结构

首先创建一个HTML文件，结构如下：

<!DOCTYPE html>
<html>
  <head>
    <title>留言板</title>
  </head>
  <body>
    <h1>留言板</h1>
    <form>
      <input type="text" id="name" placeholder="请输入姓名" required />
      <br />
      <textarea id="content" placeholder="请输入留言内容" required></textarea>
      <br />
      <button type="button" onclick="addMessage()">添加留言</button>
    </form>
    <hr />
    <ul id="messageList"></ul>
    <script src="message.js"></script>
  </body>
</html>

2. 创建JavaScript文件

在同级目录下创建一个名为message.js的JavaScript文件，代码如下：

var messages = [];

// 添加留言
function addMessage() {
  var name = document.getElementById("name").value;
  var content = document.getElementById("content").value;

  // 将留言放入数组中
  messages.push({ name: name, content: content });

  // 清空输入框内容
  document.getElementById("name").value = "";
  document.getElementById("content").value = "";

  // 刷新留言列表
  refreshMessages();
}

// 刷新留言列表
function refreshMessages() {
  var messageList = document.getElementById("messageList");

  // 清空留言列表
  messageList.innerHTML = "";

  // 循环输出留言
  for (var i = 0; i < messages.length; i++) {
    var message = messages[i];

    // 创建留言项
    var li = document.createElement("li");
    var spanName = document.createElement("span");
    var spanContent = document.createElement("span");
    var deleteButton = document.createElement("button");

    // 设置文本内容
    spanName.innerHTML = message.name + "：";
    spanContent.innerHTML = message.content;
    deleteButton.innerHTML = "删除";

    // 设置删除按钮事件
    deleteButton.onclick = function () {
      messages.splice(i, 1);
      refreshMessages();
    };

    // 添加留言项到留言列表
    li.appendChild(spanName);
    li.appendChild(spanContent);
    li.appendChild(deleteButton);
    messageList.appendChild(li);
  }
}

3. 实现添加留言功能

在JavaScript文件中，创建一个addMessage()函数，用于将留言内容添加到数组中。函数中首先获取表单中姓名和留言内容的值，然后将留言信息以对象的形式存入数组中。存储完毕后，将表单中的内容清空，并调用refreshMessages()函数刷新留言列表。

4. 实现刷新留言列表功能

在JavaScript文件中，创建一个refreshMessages()函数，用于刷新留言列表。函数中首先获取留言列表的元素，清空列表内容，然后循环输出留言。在循环中，为每条留言创建一个li元素，其中包括留言者的姓名、留言内容，以及删除按钮。在循环结束后，将所有留言项添加到留言列表中。

5. 实现删除留言功能

在JavaScript文件中，为每个删除按钮添加点击事件，点击按钮后，使用JavaScript数组中的splice()方法将该留言从数组中删除，然后调用refreshMessages()函数刷新留言列表。

下面是两个示例说明：

示例一：添加留言

用户首先在输入框中输入姓名和留言内容，然后点击“添加留言”按钮，留言信息将被添加到留言数组中并清空输入框。最后刷新留言列表，将新添加的留言显示在页面上。

示例二：删除留言

用户浏览页面上已有的留言，点击其中的“删除”按钮，该留言将从数组中删除，并更新留言列表，该留言将不再显示在页面上。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JavaScript实现留言板添加删除留言 - Python技术站