<div class="word-list"> <h1>留言板</h1> <h3>发言区</h3> <textarea name="" id="" cols="50" rows="10"></textarea> <p><button>发言</button></p > <div class="list"> <div> <p>留言内容</p > <a href=" ">删除</a > </div> </div> </div>根据这个留言板做出js
时间: 2023-08-14 12:20:38 浏览: 35
好的,根据这个留言板,可以通过JavaScript实现以下功能:
1. 点击发言按钮时,将输入框的内容添加到留言列表中,并清空输入框。
2. 点击删除按钮时,删除对应的留言。
下面是对应的JavaScript代码:
```javascript
// 获取DOM元素
const textarea = document.querySelector('textarea');
const list = document.querySelector('.list');
// 监听发言按钮的点击事件
document.querySelector('button').addEventListener('click', () => {
// 创建新的留言元素
const item = document.createElement('div');
const content = document.createElement('p');
const deleteBtn = document.createElement('a');
// 设置留言内容和删除按钮
content.innerText = textarea.value;
deleteBtn.innerText = '删除';
deleteBtn.href = '#';
// 将留言内容和删除按钮添加到留言元素中
item.appendChild(content);
item.appendChild(deleteBtn);
// 将留言元素添加到留言列表中
list.appendChild(item);
// 清空输入框
textarea.value = '';
// 监听删除按钮的点击事件
deleteBtn.addEventListener('click', (event) => {
// 阻止默认行为
event.preventDefault();
// 删除留言元素
list.removeChild(item);
});
});
```
这段代码会在页面加载完成后监听发言按钮的点击事件,并且在点击时创建新的留言元素,将留言内容和删除按钮添加到元素中,然后将元素添加到留言列表中。同时,也会监听删除按钮的点击事件,并在点击时删除对应的留言元素。