实现思路:这个涉及到事件知识点。事件三要素:事件源(什么发生变化)、事件类型(怎么发生)、事件处理函数(发生什么事)。统计文本域字数:随着用户在文本域的输入,字符串长度不断变大,修改统计数量标签的文本。事件源有两个,第一个是文本域(用户要输入字符串),第二个是修改字符串的标签文本内容(因为数量在发生变化),事件类型是键盘输入(oninput),事件处理函数是将字符串长度赋值给标签,标签的文本内容发生变化。
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
.userCount {
color: red;
}
</style>
</head>
<body>
<div class="controls">
<textarea placeholder="说点什么吧..." id="area" cols="30" rows="10" maxlength="200"></textarea>
<div>
<span class="userCount">0</span>
<span>/</span>
<span>200</span>
</div>
</div>
<script>
//事件源,获取文本域元素
let textarea = document.querySelector('textarea')
//事件源,获取统计字数标签元素
let userCount = document.querySelector('.userCount')
//事件类型:oninput(键盘输入)
textarea.oninput = function () {
//表单的文字内容利用value,length记录长度,将长度赋值给记录数量的元素,修改它的文本内容
userCount.innerHTML = textarea.value.length
}
</script>
</body>
</html>