JS获取元素失效的问题 （外一条：下拉菜单位置控制）
发生如提所述问题，目前点击挂入框js设定都没有效果。
文件夹内结果如下图所示（素材文件夹是原下载资料可无视）
css文件夹中有文件 style.css; js文件夹中有文件 assessment.js; img文件夹中有logo.png和mobile.png
index.html 中内容如下
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Registration</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <header class="header"> <div class="wrap"> <div class="header__logo">慕课高铁铁路服务中心|<span>客户服务</span></div> <div class="header__fr"> <p class="header__feedback">意见反馈<p class="header__email">imooc@com</p></p> <p class="header__status"> 您好，请<a href="javascript:;">登录</a>|<a href="javascript:;">注册</a> </p> <div class="header__menu"> 我的MOOC <!-- <div ></div> --> </div> <div class="header__mobile">手机版</div> </div> </div> <div class="dropdown"> <button class="dropbtn"> 我的MOOC <div class="triangle"></div> </button> <div class="dropdown-content"> <a href="#">未完成订单</a> <a href="#">已完成订单（改/退）</a> <a href="#">我的保险</a> <a href="#">查看个人信息</a> <a href="#">账户安全</a> <a href="#">常用联系人</a> <a href="#">重点旅客预约</a> <a href="#">遗失物品查找</a> <a href="#">服务查询</a> <a href="#">投诉</a> <a href="#">建议</a> </div> </div> </header> <div class="header-substitute"></div> <div class="content"> <div class="wrap"> <div class="content__catalog"> 您现在的位置： <a href="javascript:;">客运首页</a>> <a href="javascript:;">注册</a> </div> <div class="content__registration"> <div class="content__registration__title">账户信息</div> <form action="" id="form"> <div class="justify"> <p> <span class="must">*</span><span>用户名：</span> <input type="text" id="userAccount" placeholder="用户名设置成功后不可修改"> <p class="comment"><!-- 6-30位字母、数字或"_"，字母开头 --></p> </p> <p class="password"> <span class="must">*</span><span> 登录密码：</span> <input type="password" id="password" placeholder="6-20位字母、数字或符号"> <span class="comment security"> <span class="light" id="red"> </span> <span class="light" id="yellow"> </span> <span class="light" id="green"> </span> </span> </p> <p class="password-regular"></p> <p> <span class="must">*</span><span> 确认密码：</span> <input type="password" id="passwordEnsure" placeholder="再次输入您的密码"> <span class="comment"></span> </p> <p id="name__frame"> <span class="must">*</span><span>姓名：</span> <input type="text" id="userName" placeholder="请输入姓名"> <div class="comment underline" id="regular">姓名输入规则 <div class="explain"> <p>1.确认姓名中生僻字无法输入时，可用生僻字拼音或同音字替代。</p> <p>2.输入姓名保存后，遇有系统无法正确显示的汉字，可用该汉字的拼音或同音字重新修改后保存。</p> <p>3.姓名中有繁体字无法输入时，可用简体字替代</p> <p>4.姓名较长，汉字和英文字符合计超过30个字符（1个汉字算2个字符）的，需按姓名中第一个汉字或英文字符开始按顺序连续输入30个字符（空格字符不输入），其中英文字符输入时不区别大小写</p> </div> </div> </p> <p> <span class="must">*</span><span>证件类型：</span> <select id="certificateType"> <option value ="二代身份证">二代身份证</option> <option value ="港澳通行证">港澳通行证</option> <option value="台湾通行证">台湾通行证</option> <option value="护照">护照</option> </select> <span class="comment"></span> </p> <p> <span class="must">*</span><span>证件号码:</span> <input type="text" id="idNumber" placeholder="请输入您的证件号码"> <span class="comment"></span> </p> <p> <span class="must"> </span><span>邮箱：</span> <input type="text" id="email" placeholder="请正确填写邮箱地址"> <span class="comment"></span> </p> <p> <span class="must">*</span><span>手机号码：</span> <input type="text" id="mobile" placeholder="请输入您的手机号码"> <span class="comment">请正确填写手机号码，稍后将向该手机号码发送短信验证码</span> </p> <p> <span class="must">*</span><span>旅客类型：</span> <select id="passagerType"> <option value ="成人">成人</option> <option value ="儿童">儿童</option> <option value="学生">学生</option> <option value="残疾军人">残疾军人</option> <option value="伤残人民警察">伤残人民警察</option> </select> <span class="comment"></span> </p> <p class="term"> <input type="checkbox" id="useTerm" value="agreed"> 我已阅读并同意遵守 <a href="javascript:;">«中国铁路客户服务中心网站服务条款»</a> </p> <span></span> </div> <input class="submit" type="submit" value="下一步"/> </form> </div> </div> </div> </div> <footer class="footer"> <nav class="footer__nav"> <a href="javascript:;" class="footer__nav-item">关于我们</a> <span>|</span> <a href="javascript:;" class="footer__nav-item">网站声明</a> </nav> <div class="footer__copyright">Copyright © 2017 imooc.com All Rights Reserved | 京ICP备13046642号-2</div> </footer> </body> </html> <script src="js/assessment.js"></script>
css/style.css内容如下
/*通用样式*/
*{
margin:0;
padding: 0;
font-family: Microsoft YaHei;
}
a{
text-decoration: none;
color: #000;
}
.wrap{
width: 1000px;
margin:0 auto;
overflow: hidden;
/*border: 1px solid red;*/
position: relative;
/*z-index: 4;*/
}
/*头部样式*/
.header{
height: 100px;
width: 100%;
position: fixed;
margin-left:0;
/*position: relative;*/
background-color: #efefef;
border-bottom: 4px solid #75b4db;
z-index: 1;
}
.header > .wrap{
/*min-height: 400px;*/
}
.header__logo{
width: 460px;
height: 80px;
line-height: 80px;
font-size: 24px;
/*color: #fff;*/
text-align: right;
background: url('../img/logo.png') left center no-repeat;
background-size:80px 80px;
position: absolute;
top: 50%;
margin-top: -40px;
left: -5px;
}
.header__logo span{
font-size: 16px;
color: #aaa;
display: block;
float: right;
text-align: left;
width: 120px;
height: 80px;
/*padding-right:40px; */
line-height: 80px;
}
.header__fr{
position: relative;
float: right;
/*margin-right: 100px;*/
}
.header__fr > p, .header__fr > div{
float: left;
height: 100px;
line-height: 100px;
}
/* .header__fr > p{
}
.header__fr > div{
}*/
.header__email{
margin-left: 4px;
margin-right: 6px;
}
.header__status{
margin-left: 8px;
margin-right: 0px;
}
.header__email, .header__status>a:first-child{
color: rgb(251,116,3);
}
.header__menu{
/*position: relative;*/
/*height: 100px;*/
color: transparent;
width: 110px;
}
.triangle{
width: 0px;
height: 0px;
border-top:10px solid black;
border-bottom: 0px solid black;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
float: right;
/*position: absolute;*/
margin-top: 6px;
margin-left: 5px;
}
.header__mobile{
color: #aaa;
margin-left: 68px;
margin-right: 0px;
background: url('../img/mobile.png') left center no-repeat;
text-indent: 30px;
background-size: 20px;
}
.header-substitute{
height: 100px;
width: 100%;
}
/*表单样式*/
.content{
width: 100%;
/*margin-top: 400px;*/
}
.content__registration{
border-radius: 5px;
border:2px rgb(251,116,3) solid;
margin-bottom: 80px;
}
.content__registration__title{
background-color: rgb(251,116,3);
height: 40px;
line-height: 40px;
padding-left: 20px;
border-radius: 0px 0px 5px 5px;
color: #fff;
}
.content__registration > form{
width: 860px;
margin: 60px auto 100px;
}
.content__catalog{
height: 40px;
line-height: 40px;
}
.content__catalog>a{
color:#aaa;
}
#form p{
line-height: 36px;
/*font-size: 12px;*/
}
#form span{
display: inline-block;
margin-left: 0;
}
#form p > span.must{
width: 30px;
color: rgb(251,116,3);
}
#form p > span:nth-child(2){
width: 80px;
}
#form p.term{
margin: 0 auto;
width: 90%;
/*margin-left: 30px;*/
}
#form p.term > a{
color: rgb(36,135,201);
}
#form input{
/*display: inline-block;*/
/*float: right;*/
}
#form .justify{
/*border:1px solid red;*/
/*background-color: yellow;*/
margin-left: 120px;
}
.comment{
color: rgb(251,116,3);
/*display: block;*/
/*float: right;*/
/*margin-left: 150px;*/
/*margin-right: -250px;*/
}
.underline{
text-decoration: underline;
}
p.password{
position: relative;
height: 36px;
}
.security{
position: absolute;
}
span.light{
position: absolute;
width: 50px;
height: 10px;
margin-top: 13px;
/*top:50%;*/
}
span#red{
background-color: red;
left: 6px;
}
span#yellow{
background-color: yellow;
left: 66px;
}
span#green{
background-color: green;
left: 126px;
}
#name__frame{
position: relative;
}
#regular{
position: absolute;
cursor: pointer;
float: left;
margin-left: 284px;
margin-top: -31px;
/*display: inline-block;*/
}
.explain{
display: none;
position: absolute;
float: left;
border: 1px solid blue;
padding: 12px;
width:400px;
margin-left: 30px;
/*margin-top: -8px;*/
background-color: white;
color: #888;
font-size: 13px;
}
.explain p{
line-height: 30px;
}
#regular:hover .explain{
display: block;
}
/* #regular:hover {
background-color: red;
}*/
input[type=text], input[type=password]{
width: 160px;
}
select{
width: 160px;
}
.submit{
margin: 40px auto;
border-radius: 5px;
background-color: rgb(251,116,3);
color: #fff;
height:40px;
line-height: 40px;
width: 240px;
display: block;
}
/*页脚设置*/
.footer{
height: 100px;
width: 100%;
margin-left:0;
/*position: relative;*/
background-color: #dcdcdc;
color: #bbb;
border-top: 2px solid #75b4db;
}
.footer__nav, .footer__copyright{
margin: 0 auto;
text-align: center;
}
.footer__nav-item{
color: #bbb;
}
.footer__nav{
height: 60px;
line-height: 80px;
margin-bottom: 0;
}
/* 下拉按钮样式 */
.dropbtn {
background-color: transparent;
color: black;
padding: 16px;
padding-left:2px;
margin-left:-4px;
font-size: 16px;
border: none;
cursor: pointer;
/*margin-top: -74px;*/
}
/* 容器 <div> - 需要定位下拉内容 */
.dropdown {
position: absolute;
display: inline-block;
z-index: 4;
margin-top: -77px;
left: 50%;
margin-left: 260px;
}
/* 下拉内容 (默认隐藏) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
/*padding-left: 2px;*/
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
border:1px solid rgb(251,116,3);
z-index: 4;
margin-left: -4px;
}
/* 下拉菜单的链接 */
.dropdown-content a {
color: black;
padding: 6px 4px 6px 4px;
margin: 0 10px;
text-decoration: none;
display: block;
font-size: 13px;
}
.dropdown-content a:nth-child(3n),
.dropdown-content a:nth-child(3n+2){
border-bottom: 1px dotted #ccc;
}
/* 鼠标移上去后修改下拉菜单链接颜色 */
.dropdown-content a:hover {color: rgb(251,116,3)}
/* 在鼠标移上去后显示下拉菜单 */
.dropdown:hover .dropdown-content {
display: block;
}
/* 当下拉内容显示后修改下拉按钮的字体颜色 */
.dropdown:hover .dropbtn {
color: rgb(251,116,3);
}js/assessment.js 内容如下 （因为写了几个input框的js控制都没有响应，就没有继续写完了）
// var userAccount = document.querySelector("#userAccount"),//获取用户名
var userAccount =document.getElementById("userAccount"),
password = document.querySelector("#password"),//获取密码
passwordEnsure = document.querySelector("#passwordEnsure"),//获取确认密码
userName = document.querySelector("#userName"),//获取姓名
certificateType = document.querySelector("#certificateType"),//获取证件类型
idNumber = document.querySelector("#idNumber"),//获取身份证号码
email = document.querySelector("#email"),//获取邮箱号码
mobile = document.querySelector("#mobile"),//获取手机号码
passagerType = document.querySelector("#passagerType"),//获取旅客类型
userTerm = document.querySelector("#userTerm"),//获取对用户条款的确认情况
comments = document.querySelectorAll(".comment"),//获取所有提示文段的下标
submit = document.querySelector(".submit");
var test1 = false, test2 = false, test3 = false, test4 = false, test5 = false,
test6 = false, test7 = false, test8 = false, test9 = false, test10 = false;
userAccount.onfocus = function () {
alert("done");
comments[0].innerHTML = "6-30位字母、数字或'_'";
comments[0].style.color = "green";
content__registration__title.style.color = "green";
};
userAccount.onblur = function () {
var reg = /^\w{6,30}$/;
if (this.value == "") {
comments[0].innerHTML = "请您务必写入用户名!";
comments[0].style.color = "red";
} else {
if (!reg.exec(userAccount.value)) {
comments[0].innerHTML = "6-30位字母、数字或'_'";
comments[0].style.color = "red";
} else {
comments[0].innerHTML = "格式正确";
comments[0].style.color = "green";
test1 = true;
}
}
};
//-------------------------------------------------------------账号结束;
password.onfocus = function () {
comments[1].innerHTML = "6-20位字母,数字或符号";
comments[1].style.color = "green";
};
password.onblur = function () {
var reg = /^\w{6,20}$/;
if (this.value == "") {
comments[1].innerHTML = "请您务必写入密码!";
comments[1].style.color = "red";
} else {
if (!reg.exec(userPass.value)) {
comments[1].innerHTML = "请输入6-20位字母,数字或符号";
comments[1].style.color = "red";
} else {
comments[1].innerHTML = "格式正确";
comments[1].style.color = "green";
test2 = true;
}
}
};
/*------------------------------------------------------------------密码结束*/
passwordEnsure.onfocus = function () {
comments[2].innerHTML = "请确认两次密码相同";
comments[2].style.color = "green";
};
passwordEnsure.onblur = function () {
if (this.value == "") {
comments[2].innerHTML = "请务必再次确认密码";
comments[2].style.color = "red";
} else {
if (this.value != userPass.value) {
comments[2].innerHTML = "两次密码不相同";
comments[2].style.color = "red";
} else {
comments[2].innerHTML = "格式正确";
comments[2].style.color = "green";
test3 = true;
}
}
};
/*-----------------------------------------------------------------------确认密码结束*/辛苦老师和同学帮忙验证和指出问题。谢谢
—————>—————>—————>—————>—————>—————>—————>—————>
外一条：下拉菜单位置控制
右上角显示为“我的MOOC”的div，当屏幕变窄到一定程度会随着屏幕变化移动，造成与其他标签重叠。
造成这种情况的原因是，因为我把这个div放到限制页头宽度的div.wrap外面；
但是不放在外面的话，一会儿下拉菜单弹出来又会被wrap的高度遮掉。
请问这种情况如何把“我的MOOC”按钮定在页头的相关位置呢？
25
收起
正在回答
3回答
同学你好，目前的情况是：源码的外部引入文件是正确的。这个代码写在script中也是可以的。但是外部引用不对是吗？
建议：可以确认下引入的文件路径是否准确。打开的html与文件夹中的这个是否是同一个。
也查看下js文件名是否一致，看是否有空格之类的忽略了，单词是否一致。也可以换个名字测试下哦。
祝学习愉快~
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星