To implement a form, if there is no input in the password input column or the two inputs are inconsistent, the prompt will be displayed, otherwise it will be hidden. But the prompt never comes out. Why do I need help?
<!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 front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Find the following paragraph in your code
Please delete the line break between <input/> and <span>.
Reason
DOMElement.nextSibling property returns the next sibling DOM element of the node. Line breaks or spaces are counted as a #text type node. Your previous code nextSibling returns a text node and setting the style attribute on it will certainly not meet your needs.
If you don’t believe it, you can also verify it: without changing your html code, replace DOMElement.nextSibling in the script with DOMElement.nextSibling.nextSibling and it will work normally.