利用JavaScript书写代码并用HTML格式:简易留言板,并且单击删除按钮后能删除留言
时间: 2024-02-03 22:11:22 浏览: 27
HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>简易留言板</title>
</head>
<body>
<h1>留言板</h1>
<form>
<label for="name">姓名:</label>
<input type="text" id="name" name="name"><br><br>
<label for="message">留言:</label>
<textarea id="message" name="message"></textarea><br><br>
<button type="button" id="submit">提交留言</button>
</form>
<hr>
<h2>留言列表</h2>
<ul id="messages">
</ul>
<script src="留言板.js"></script>
</body>
</html>
```
JavaScript代码:
```javascript
// 获取表单和留言列表元素
const form = document.querySelector('form');
const messagesList = document.querySelector('#messages');
// 添加留言函数
function addMessage(name, message) {
// 创建新的列表项和删除按钮
const li = document.createElement('li');
const deleteBtn = document.createElement('button');
deleteBtn.innerText = '删除';
deleteBtn.addEventListener('click', () => {
// 删除该留言
li.remove();
});
// 填充列表项内容
li.innerHTML = `<strong>${name}:</strong> ${message}`;
li.appendChild(deleteBtn);
// 将列表项添加到留言列表中
messagesList.appendChild(li);
}
// 监听表单提交事件
form.addEventListener('submit', (event) => {
event.preventDefault(); // 阻止表单默认提交行为
// 获取表单输入值并添加留言
const name = form.elements.name.value;
const message = form.elements.message.value;
addMessage(name, message);
// 清空表单输入框
form.reset();
});
```