javascript - 为什么无法实现表单原件失去焦点后改变提示的样式？
问题描述
要实现一个表单，在输入密码一栏中如果没有输入或两次输入不一致则显示提示，否则隐藏。但是提示始终出不来，求助是为什么呢？
<!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' /><link type='text/css' href='https://www.haobala.com/wenda/checkload.css' rel='stylesheet' /> <script type='text/javascript'>function checkEmpty(obj){ if(!obj.value)obj.nextSibling.style.display='block'; else obj.nextSibling.style.display='none'; } function checkPwd(obj){ var pwd = document.getElementById('pwd').value; var pwdAgain = obj.value; if(pwd != pwdAgain)obj.nextSibling.style.display='block'; elseobj.nextSibling.style.display='none';}</script><title>用户登录验证</title></head><body><form class='bg'> <ul><li>用户名：</li><li>输入密码：</li><li>确认密码：</li> </ul> <p class='list'><p><input type='text'/></p><p><input type='password' onblur='checkEmpty(this)' /><span style='display:none'>密码不能为空！</span></p><p><input type='password' onblur='checkPwd(this)'/><span style='display:none'>密码不一致！</span></p><input type='submit' /> </p></form></body></html>
css代码：
@charset 'utf-8';/* CSS Document */body{font-size:14px; font-family:'微软雅黑';}body,p,ul,li{margin:0; padding:0; list-style:none;}.bg{ width:400px; height:180px; margin:50px; border:3px double #ccc; padding:40px; background:#CCC;}ul{float:left;}li{ text-align:right; height:50px;}.list{float:left;}p{ width:320px; height:50px; }span{ float:left; padding:0 0 0 10px; color:red;}#pwd{}
问题解答
回答1：找到你代码中如下这段
<p><input type='password' onblur='checkEmpty(this)' /><span style='display:none'>密码不能为空！</span></p><p><input type='password' onblur='checkPwd(this)'/><span style='display:none'>密码不一致！</span></p>
请删掉 <input/>和<span>之间的换行即可。
原因DOMElement.nextSibling属性返回该节点下一个同级DOM元素，换行或者空格都算做一个#text类型的节点。之前你的代码nextSibling返回的一个文本节点，在其上设置style属性，当然不能达成你的需求。
如果不信，你还可以验证一下：不改变你的html代码，把脚本中 DOMElement.nextSibling换成 DOMElement.nextSibling.nextSibling 也能正常工作。
相关文章：
1. javascript - webpack构建工具重构代码的流程是怎么样的？2. java - 安卓调用c++lib3. 如何解决docker宿主机无法访问容器中的服务？4. javascript - 想做一个canvas的触摸画板，但屏幕会在画的时候滚来滚去，如何阻止？5. java - 大家可以分享一下各自如何高效编程吗？就是一些常用的配置及习惯等等6. mysql 5个left关键 然后再用搜索条件 几千条数据就会卡，如何解决呢7. javascript - 如何根据package.json来自动安装包8. css3 - 求css页面解决方案9. java - tomcat部署启动项目后报错 请大神帮我看一下10. mysql - sql 左连接结果union右连接结果，导致重复性计算怎么解决？
网公网安备