为何4-3编程练习经常不灵

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>输入文本</title>

<style type="text/css">

</style>

</head>

<body>

<p class="text">字数限制在30字内，<span id="tip">您还可以输入<b id="count">30</b> 字</span></p>

<textarea cols="50" rows="7" id="text"></textarea>

<script type="text/javascript">

// 获取文本框

var total=30;

var text=document.getElementById("text");

var count=document.getElementById("count");

var tip=document.getElementById("tip");

// 绑定键盘事件

document.onkeypress=function(){

var len=text.value.length;

if(len<=30){

var allow=total-len;

count.innerHTML=allow;

}else{

var left=len-30;

tip.innerHTML="您已经超出"+left+"字";

}

</script>

</body>

</html>

有时候第一次输入可以，刷新后就无法动了，在作业提交那里键盘输入没反应，代码是不是那里有问题？？？

还有个问题就是我删除字符的时候，到 “字数限制在30字内，您已经超出1字”，这个时候就卡住了，这是为何？？？

OlafChou 2017-07-12

源自：JavaScript DOM事件 4-6 编程练习

收起

3回答

卡布琦诺回答被采纳获得+3积分 2017-07-14 09:58:00

你好，因为超出之后，改变了html的结构，改变之后的html结构为：如下：

html：<p>字数限制在30字内，<span id="tip">"你已超出"+"<b>"+num2+"</b>"+"字";</span></p>

这时已经没有count元素了，所以会一直停留在超出，建议：给可改成如下形式；祝学习愉快！

先声明：

 var len=text.value.length;
 var num1=total-len;
 var num2=len-total;

if (len<=total) {
            tip.innerHTML="您还可以输入"+"<b>"+num1+"</b>"+"字";
          } 
          else{
            tip.innerHTML="你已超出"+"<b>"+num2+"</b>"+"字"; 
            console.log(num2);
          }
}

希望可以帮到你！

收起回答