点击会员名没有效果为什么
按照老师的代码编写,第一个会员名onfocus就显示不出来,看了好几遍也没看出来原因。还有个问题就是name_msg.innerHTML,这部分内容html里面不是有吗?为什么还要在js中再写一遍呢?求教求教。
html部分
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表单验证</title>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<form>
<div>
<label><span>会员名:</span><input type="text" class="text"/></label>
<p class="msg"><i class="ati"></i>5-25个字符,一个汉字为两个字符,推荐使用中文会员名</p>
</div>
<div>
<label><span></span><b id="count">0个字符</b></label>
</div>
<div>
<label>
<span>登录密码:</span><input type="password" class="text"/>
</label>
<p class="msg"><i class="err"></i>5-25个字符,一个汉字为两个字符,推荐使用中文会员名</p>
</div>
<div style="margin:3px 0 10px 0">
<label>
<span></span>
<em class="active">弱</em><em>中</em><em>强</em>
</label>
</div>
<div style="margin-bottom:20px">
<label>
<span>确认密码:</span>
<input type="password" class="text" disabled=""/>
</label>
<p class="msg"><i class="ati"></i>请再输入一次</p>
</div>
<div>
<label>
<span> 验证码:</span><input type="text" class="text" style="width:50px"/>
<img src="images/get_img.jpg" width="100" height="30"/><a class="changeimg" href="javascript:;" title="重新获取验证码"></a>
</label>
</div>
<div>
<input class="submitBtn btn" type="submit" value="同意协议并注册"/>
</div>
</form>
</body>
</html>
CSS部分
@charset "utf-8";
/*reset*/
*{
margin:0;
padding:0;
font:12px/1.5 "宋体",“Arial”,"sans-serif","Tahoma";
color:#666;
}
img{
border:none;
}
input,img,label{
vertical-align:middle;
}
input:focus,textarea:focus{
outline:none;
}
.btn{border:none 0;}
.mb10{margin-bottom:10px;}
/*main*/
form{
width:740px;
height:500px;
margin:100px auto;
}
form div{
overflow:hidden;
clear:both;
}
form div label{
float:left;
clear:both;
}
form div label .text{
width:152px;
height:26px;
padding:0 2px;
border:1px solid #ccc;
}
form div label b{
font-weight:normal;
font-size:12px;
color:#ccc;
visibility:hidden;
}
form div em{
display:inline-block;
font-size:12px;
text-align:center;
color:#fff;
vertical-align:middle;
font-style:normal;
width:53px;
height:15px;
line-height:15px;
background:#ffd099;
}
form div .active{
background-color:#ff6600;
}
div span{
display:inline-block;
width:80px;
text-align:right;
}
.submitBtn{
width:135px;
height:33px;
background:url(/images/sprite.png);
color:#fff;
margin:20px 0 0 80px;
}
.changeImg{
width:22px;
height:22px;
display:inline-block;
vertical-align:middle;
background:url(../imges/sprite.png)no-repeat 0-128px
}
.msg{
line-height:12px;
color:#999;
float:left;
margin-left:5px;
display:none;
}
.msg i{
display:inline-block;
vertical-align:middle;
width:25px; height:20px;
background:url(../images/sprite.png)no-repeat;
}
.msg .ati{
background-position:0-71px;
}
.msg .err{
background-position:0-39px;
}
.msg .ok{
background-position:0-99px;
}
js部分
// JavaScript Document
window.onload=function(){
var aInput=document.getElemntsByTagname('input');
var oName=aInput[0];
var pwd=aInput[1];
var pwd2=aInput[2];
var aP=document.getElementsByTagName('p');
var name_msg=aP[0];
var pwd_msg=aP[1];
var pwd2_msg=aP[2];
var count=document.getElementById('count');
var aEm=document.getElemntsByTagName('em');
var re=/[^\w\u4e00-u9fa5]/g;
oName.onfocus=function(){
name_msg.style.display="block";
name_msg.innerHTML='<i class="ati"></i>5-25个字符,一个汉字为两个字符,推荐使用中文会员名。'
}
oName.onkeyup=function(){
}
oName.onblur=function(){
}
}