请老师帮忙看下哪里错了
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>onblur和onfocus</title>
<style type="text/css">
.red{
border:1px solid red;
}
</style>
</head>
<body>
姓名：<input type="text"> <span></span>
<script type="text/javascript">
var name=document.getElementsByTagName("input")[0];
var tip=document.getElementsByTagName("span")[0];
name.onfocus=function(){
var val=this.value;
if(val.length==0){
tip.innerHTML="请输入您的姓名";
}
}
name.onblur=function(){
if(val.length==0){
tip.innerHTML="姓名不能为空";
this.className="red"
}
}
</script>
</body>
</html>
正在回答
你好同学，是因为你修改的代码中，失去焦点的事件少了一个结尾的花括号导致报错，所以代码没有办法运行，自然怎么改都没有效果。另外，老师在给出的截图中，onblur事件里面的else中，是清空提示文字内容，而不是清空input的红色边框。
老师把修改好的代码粘贴给你，同学再细心改一下哦。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>onblur和onfocus</title>
<style type="text/css">
.red {
border: 1px solid red;
}
</style>
</head>
<body> 姓名：<input type="text"> <span></span>
<script type="text/javascript">
var names = document.getElementsByTagName("input")[0];
var tip = document.getElementsByTagName("span")[0];
names.onfocus = function() {
var val = this.value;
if (val.length == 0) {
tip.innerHTML = "请输入您的姓名";
this.className = ""
} else {
tip.innerHTML = ""
}
};
names.onblur = function() {
var val = this.value
if (val.length == 0) {
tip.innerHTML = "姓名不能为空";
this.className = "red";
} else {
//这里不用清空边框，因为获取焦点的时候已经清空，如果不执行if判断，红色边框是没有的
// this.className = ""
// 清空提示文字
tip.innerHTML = "" ;
}
// 如下加上结尾的括号
}
</script>
</body>
</html>
祝学习愉快，望采纳。
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星