Um ein Formular zu implementieren, wird die Eingabeaufforderung angezeigt, wenn in der Passworteingabespalte keine Eingabe erfolgt oder die beiden Eingaben inkonsistent sind, andernfalls wird sie ausgeblendet. Aber die Aufforderung kommt nie. Warum brauche ich Hilfe?
<!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="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";
else
obj.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)" id="pwd"/>
<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-Code:
@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{}
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
找到你代码中如下这段
请删掉 <input/>和<span>之间的换行即可。
原因
DOMElement.nextSibling属性返回该节点下一个同级DOM元素，换行或者空格都算做一个#text类型的节点。之前你的代码nextSibling返回的一个文本节点，在其上设置style属性，当然不能达成你的需求。
如果不信，你还可以验证一下：不改变你的html代码，把脚本中 DOMElement.nextSibling换成 DOMElement.nextSibling.nextSibling 也能正常工作。