摘要：新知识点（1）使用text.value.length获取文本框字数，其中text.value可以返回字符串。（2）使用label.innerHTML = m将变量m的值输出至label标签之间。（3）键盘输入可以触发text.onkeyup事件。遇到的问题（1）错误提示: ReferenceError: m is not defined &
新知识点
（1）使用text.value.length获取文本框字数，其中text.value可以返回字符串。
（2）使用label.innerHTML = m将变量m的值输出至label标签之间。
（3）键盘输入可以触发text.onkeyup事件。
遇到的问题
（1）错误提示: ReferenceError: m is not defined
问题只会出现在加载/刷新页面后，不输入任何内容直接提交的时候，如果有向文本框输入任何内容，即使又将其清除，也不会出错。只有onkeyup事件与键盘输入有关，问题在于onkeyup事件上？因为m在事件前未曾出现过，onkeyup事件触发后就会定义m。
解决该问题，必须在onkeyup事件之前定义m。同理，onkeyup事件涉及的所有变量，都应该在事件前声明？
准确地说，应该是其他地方需要用到的变量不应该在onkeyup内部创建，因为如果事件没有被触发，变量就不会被创建。
（2）变量m如果只是声明，而不赋值，m值为undefined，【发布】可以直接提交，因为if判断条件里面只是判断m<0，而undefined的情况归为else里面。同理，即使m赋值为0，也可以直接提交。
（3）undefined == null 不等于0
（4）错误提示：TypeError: btn is null
无法【发布】，但是手工输入命令是可以获取button元素的，可以判定为时机问题？
原因：btn的声明及相关function不包含在ready()之内。
完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>微博输入</title>
<style type="text/css">
.all{width:630px; border: #EDBCC8 8px solid; margin: 0px auto;}
img{float: left; margin: 10px 5px;}
.remain{float: right; margin: 10px 8px;}
textarea{width: 610px; height: 100px; border: 2px solid #D7C5B3; display: block; margin: 0px auto;}
input{width:75px; height: 28px; background-color: #FFC49F; border: none; border-radius: 3px; font-size: 14px; color: #FFFFFF}
#icon1, #icon2, #icon3, #icon4, #icon5, #icon6{display: inline-block; font-size: 12px; line-height:28px; padding-left: 25px; margin: 10px 3px;}
#icon1{background: url(img/wb/an5.png) no-repeat left;}
#icon2{background: url(img/wb/an4.png) no-repeat left;}
#icon3{background: url(img/wb/an3.png) no-repeat left;}
#icon4{background: url(img/wb/an2.png) no-repeat left;}
#icon5{background: url(img/wb/an1.png) no-repeat left;}
#icon6{color: #AEAEAC; margin-left: 180px;}
div> div> span{font-size: 18px; font-style: italic;}
</style>
<script type="text/javascript">
window.onload = function inpt() {
var text = document.getElementById("txa");
var count = document.getElementById("num");
var m = 140;
//输入更新字数
text.onkeyup = function refresh() {
m = 140-text.value.length
count.innerHTML = m;
if (m<0) {
count.style.color = "red"
} else{
count.style.color = "green"
}
}
//提交判断
var btn = document.getElementById("bt");
btn.onclick = function submit () {
if (m==140) {
alert("你还没有输入内容。")
text.focus()
} else if (m<0) {
alert("字数太多！")
} else {
alert("发布成功！")
}
}
}
</script>
</head>
<body>
<div class="all">
<img src="img/wb/12.png" >
<div class="remain">还可以输入<span id="num">140</span>字</div>
<textarea id="txa"></textarea>
<span id="icon1">表情</span>
<span id="icon2">图片</span>
<span id="icon3">视频</span>
<span id="icon4">话题</span>
<span id="icon5">长微博</span>
<span id="icon6">公开</span>
<input type="button" id="bt" value="发布" >
</div>
</body>
</html>END
批改老师：天蓬老师批改时间：2018-11-06 21:29:19
老师总结：看得出非常的用心,提示,window.onload()方法目前基本上已经废除,建议直接将js代码写到页面底部,等全部dom加载完成再执行
