Pour implémenter un formulaire, s'il n'y a aucune saisie dans la colonne de saisie du mot de passe ou si les deux saisies sont incohérentes, l'invite sera affichée, sinon elle sera masquée. Mais l'invite ne s'affiche jamais. Pourquoi ai-je besoin d'aide ?
<!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>
code 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{}
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Retrouvez le paragraphe suivant dans votre code
Veuillez supprimer le saut de ligne entre <input/> et <span>.
La propriétéReason
DOMElement.nextSibling renvoie l'élément DOM frère suivant du nœud. Les sauts de ligne ou les espaces sont comptés comme un nœud de type #text. Votre code précédent nextSibling renvoie un nœud de texte, et la définition de l'attribut style dessus ne répondra certainement pas à vos besoins.
Si vous n'y croyez pas, vous pouvez aussi le vérifier : sans changer votre code html, remplacez DOMElement.nextSibling dans le script par DOMElement.nextSibling.nextSibling et cela fonctionnera normalement.