该发布评论所要实现的功能有:
1.文本框输入文字,对应的文字字数改变
2.点击发布,可以将评论按一定的形式发布
3.点击删除,可以进行删除操作
首先是功能1.文本框输入文字,对应的文字字数改变
// *****************输入文字改变字数***********************
// 1.获取标签(点击什么 什么改变都需要获取)
let area = document.querySelector("#area");
let useCount = document.querySelector(".useCount");
// 2.注册事件
area.addEventListener("input", function () {
//将文本框中输入的内容长度输出到字数计数的位置
useCount.innerHTML = area.value.length;
});
其次是功能2.点击发布,可以将评论按一定的形式发布
先分析功能2,
- 有两种方法可以触发事件,第一种是按发布按钮,第二种是回车键。
- 如果在文本框内输入的内容(内容长度=0)为空白,则不输出(判断)
- 内容的发布,可以用节点来做,创建新节点,再将其追加到对应的结构中
- 内容发布之后,要将输入框及其文字计数恢复为空白和0
// *****************点击发布显示内容***********************
// 1.获取标签
let btn = document.querySelector("#send");
let list = document.querySelector("#list");
// 2.注册事件
btn.addEventListener("click", function () {
// 补充:输入不能为0
if (area.value.length === 0) {
alert("内容不能为空");
return;
}
// 2.1创建节点
// 随机事件
let random = Math.floor(Math.random() * dataArr.length);
let li = document.createElement("li");
// 2.2节点内容
li.innerHTML = ` <div class="info">
<img class="userpic" src="${dataArr[random].imgSrc}"/>
<span class="username">${dataArr[random].uname}</span>
<p class="send-time">${new Date().toLocaleString()}</p>
</div>
<div class="content">${area.value}</div>
<span class="the_del">X</span>
`;
// 2.3追加节点
list.insertBefore(li, list.children[0]);
// 2.4重置
area.value = "";
useCount.innerHTML = 0;
});
//3.回车发布
area.addEventListener("keydown", function (e) {
//key是指用户按下键盘键的值
if (e.key == "Enter") {
btn.click();
}
});
最后是功能3.点击发布,点击删除,可以进行删除操作
分析:
我们所要删除的内容是我们通过程序追加进去的,所以我们可以通过事件委托,减少事件的绑定次数
list.addEventListener("click", function (e) {
//如果事件对象的class名为the_del
if (e.target.className === "the_del") {
//将其父元素移除,当前e.target实际上就是class为the_del的这个标签,而我们不能只删除这个元素,所以通过事件委托,将其父元素删除
list.removeChild(e.target.parentNode);
}
});