请问老师如何修改才能实现效果

请问老师如何修改才能实现效果

<!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]

,tip=document.getElementsByTagName("span")[0];

name.onfocus=function (){

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

}

name.onblur=function (){

   if(name.innerHTML==""){

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

       name.className="red";

   }

// 补充代码

</script>

</body>

</html>


正在回答

登陆购买课程后可参与讨论,去登陆

2回答

同学,你好。因为window下面本身就有name属性,但是如果不添加window.onload,那么window自身的name属性就跟变量名name起了冲突,所以效果就不会实现。当添加了window.onload之后,页面加载完成,读取的就是标签,那么name指向的就是input这个标签,所以不添加window.onload的话,可以把name变量名更改一下,例如:name1,参考下图:

http://img1.sycdn.imooc.com//climg/5c7f2d160001bce611140647.jpg

祝学习愉快!

Steve007 2019-03-05 10:24:51

同学,你好。这里应该将js脚本放到wondow.onload事件里边,等页面完全加载完在执行这个函数,在失焦事件里判断的应该是name的值,如图:

http://img1.sycdn.imooc.com//climg/5c7ddde90001c90a10530768.jpg

祝学习愉快!

  • 提问者 hayha西蒙 #1
    老师,这里为什么必须要将js脚本放到wondow.onload事件里边才能实现效果,这里的JS代码并没有写在head标签里,而是在body标签最后面了,按理说代码从上到下解析的话,解析到js脚本的时候页面已经加载完了
    2019-03-05 21:48:39
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师