html留言板js
时间: 2023-08-23 09:03:42 浏览: 51
以下是一个简单的 HTML 留言板的 JavaScript 实现:
HTML 代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>留言板</title>
</head>
<body>
<h1>留言板</h1>
<form id="message-form">
<label for="name">姓名:</label>
<input type="text" id="name" required><br>
<label for="message">留言:</label>
<textarea id="message" required></textarea><br>
<button type="submit">提交</button>
</form>
<ul id="message-list"></ul>
<script src="main.js"></script>
</body>
</html>
```
JavaScript 代码:
```js
const form = document.querySelector('#message-form');
const nameInput = document.querySelector('#name');
const messageInput = document.querySelector('#message');
const messageList = document.querySelector('#message-list');
form.addEventListener('submit', (event) => {
event.preventDefault(); // 阻止表单提交的默认行为
const name = nameInput.value;
const message = messageInput.value;
const li = document.createElement('li');
const text = document.createTextNode(`${name}: ${message}`);
li.appendChild(text);
messageList.appendChild(li);
nameInput.value = '';
messageInput.value = '';
});
```
这段 JavaScript 代码使用了事件监听器来监听表单的提交事件。当表单被提交时,它会使用 `nameInput` 和 `messageInput` 元素的值来创建一个新的留言,并将其添加到 `messageList` 元素中。最后,它会清空输入框以便用户可以继续输入新的留言。