<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href= "message.css"> </head> <body> <div> <h1>留言板</h1> <ul></ul> <textarea placeholder="请编辑你的留言"></textarea> <button class="sub">发布</button> </div> <script> //获取元素 var btn = document.querySelector('.sub'); var text = document.queryselector('textarea'); var ul = document .querySelector('ul'); btn.onclick = function () { if (text.value == '') { alert('你没有输入内容'); return false; } else { //建立li元素节点 var li = document.createElement('li'); li.innerHTML = text.value; var button = document.createElement('button'); button.className ='remove'; button.innerHTML ='删除'; button.onclick = function (){ ul.removeChild(this.parentNode); }; li.appendChild(button); //在ul元素中添加节点 ul. insertBefore(li,ul.children[0]); //将文本城中的内容清空 text. value =''; } }; </script> </body> </html>检查代码,试问其中的链接"message.css"内应该写入如何才能实现单击“发布按钮发表留言的功能。 实现删除留言功能
时间: 2024-02-23 14:59:53 浏览: 175
网页期末作业(纯html+css实现).docx
"message.css"应该是样式文件,与单击“发布”按钮发表留言的功能没有关系。为了实现单击“发布”按钮发表留言的功能,应该在JS代码中添加事件监听器,当按钮被点击时,获取文本框中的内容,创建一个新的li元素节点,并将文本框中的内容赋值给该节点的innerHTML属性,最后将该节点添加到ul元素中。
同时,为了实现删除留言功能,需要在每个li元素节点中添加一个“删除”按钮。当该按钮被点击时,删除该节点。
下面是修改后的JS代码:
```html
<script>
//获取元素
var btn = document.querySelector('.sub');
var text = document.querySelector('textarea');
var ul = document.querySelector('ul');
//添加事件监听器
btn.onclick = function() {
if (text.value == '') {
alert('你没有输入内容');
return false;
} else {
//创建li元素节点
var li = document.createElement('li');
li.innerHTML = text.value;
//创建删除按钮
var button = document.createElement('button');
button.className = 'remove';
button.innerHTML = '删除';
button.onclick = function() {
ul.removeChild(this.parentNode);
};
li.appendChild(button);
//在ul元素中添加节点
ul.insertBefore(li, ul.children[0]);
//清空文本框
text.value = '';
}
};
</script>
```
阅读全文