老师请检查

<!DOCTYPE html>

<html>

<head>

<title>onblur和onfocus</title>

.red{

border:1px solid red;

}

</style>

</head>

<body>

姓名：<input type="text"> <span></span>

// 补充代码

var getInput=document.getElementsByTagName("input")[0];

var getTip=document.getElementsByTagName("span")[0];

getInput.onfocus=function(){

var inputVal=this.value;

if(inputVal==""){

getTip.innerHTML="请输入您的姓名";

}

getInput.onblur=function(){

if(this.value==""){

getTip.innerHTML="用户名不能为空";

this.className="red";

}else{

getTip.innerHTML="";

this.className="";

}

</script>

</body>

</html>

老师我在两个事件中的判断条件用了不同的方法来写，请问工作中用哪种更多呢？

源自：JavaScript DOM事件 3-9 编程练习

收起

2回答

山河远阔ZZ 2019-02-28 09:58:22

同学你好。

当前执行的对象只有一个，就可以通过this来指向。

.value属性可设置或者返回文本域的 value 属性值，而在效果中，只是要改变span标签里的内容，所以需要使用.innerHTML而不是this.value;

希望帮助到了你！

山河远阔ZZ 2019-02-27 18:18:08

同学你好，效果实现的很好，代码也没有问题。

在这个案例中，这两种判断都是可以的哦，如果以后遇到比较复杂的效果，需要多次运用的时候，建议把this.value单独存放在一个变量名里面，这样就会节省很多代码量了哦。

祝学习愉快，继续加油！

提问者 hyperse #1

一个函数中的两个dom对象都需要改变样式，那都写this的话可以吗？还是说只有调用该函数的dom对象才能写this.value呢？比如本题中的span元素就不是函数的调用对象，故执行脚本里面要改变span的样式只能写getTip.innerHTML而不能写this.value？

2019-02-27 20:35:25