温馨提示×

怎么使用JS实现简单留言板功能

js
小亿
124
2023-07-28 05:08:07
栏目: 编程语言

实现一个简单的留言板功能,可以使用以下步骤:

  1. 创建一个HTML文件,并添加一个用于显示留言的区域和一个用于输入留言的表单。
<!DOCTYPE html>
<html>
<head>
<title>留言板</title>
</head>
<body>
<div id="messageArea">
<!-- 留言显示区域 -->
</div>
<form id="messageForm">
<textarea id="messageInput" placeholder="请输入留言"></textarea>
<button type="submit">提交</button>
</form>
<script src="script.js"></script>
</body>
</html>
  1. 创建一个JavaScript文件,并将其引用到HTML文件中。

  2. 在JavaScript文件中,首先获取留言显示区域和留言输入框的引用。

var messageArea = document.getElementById('messageArea');
var messageInput = document.getElementById('messageInput');
  1. 定义一个用于添加留言的函数,该函数在表单提交时被调用。
function addMessage(event) {
event.preventDefault(); // 阻止表单默认提交的行为
var message = messageInput.value;
if (message.trim() !== '') {
var messageElement = document.createElement('div');
messageElement.textContent = message;
messageArea.appendChild(messageElement);
messageInput.value = ''; // 清空输入框
}
}
  1. 将添加留言的函数绑定到表单的submit事件。
var messageForm = document.getElementById('messageForm');
messageForm.addEventListener('submit', addMessage);

现在,当用户在输入框中输入留言并点击提交按钮时,留言将会出现在留言显示区域中。

0