18042 sujets

Questions générales et questions de débutants

[Résolu] Fermer plusieurs div avec JavaScript

Bonjour à tous,

Je cherche code JS pour fermer plusieurs div.

J'ai document.getElementById qui ne ferme qu'un seul div (et donc laisse les autres)

Voici les div que je souhaite fermer un à un:

					
<html>
<head>

<script>
function navsac()
{
	document.getElementById('navsac').style.display = 'none';

	
}
</script>
</head>
<body>
<!------------- Erreur d'envoi ------------->
<div id=navsac>
<div class="dialog" id="navmsg-nasa" role="dialog">
						<div class="nav_content">
							<header>Erreur d'envoi</header>
							<div class="navmsg">Une erreur s'est produite lors de l'envoi de l'e-mail. Merci de réessayer.</div>
							<footer class="nav_footer">
								<button type="button" class="nav_close button" data-dismiss="alert"	onclick="navsac()">Fermer</button>
							</footer>
						</div>
					</div>
					</div>

<!----------- Envoi Réussi ----------->					
<div id=navsac>
<div class="dialog" id="navmsg-nasa" role="dialog">
						<div class="nav_content">
							<header>Envoi réussi</header>
							<div class="navmsg">Merci de votre message. Vous recevrez une réponse dès que possible !</div>
							<footer class="nav_footer">
								<button type="button" class="nav_close button" data-dismiss="alert"	onclick="navsac()">Fermer</button>
							</footer>
						</div>
					</div>
					</div>	
					
<!------------- Champ manquant ------------->
<div id=navsac>
<div class="dialog" id="navmsg-nasa" role="dialog">
						<div class="nav_content">
							<header>Champ(s) manquant(s)</header>
							<div class="navmsg">Un ou plusieurs ne sont pas remplis, merci de les remplir.</div>
							<footer class="nav_footer">
								<button type="button" class="nav_close button" data-dismiss="alert"	onclick="navsac()">Fermer</button>
							</footer>
						</div>
					</div>
					</div>
</body>
</html>


Merci d'avance
Modérateur
Bonjour,

Quand tu dis "fermer plusieurs div" c'est les faire disparaître avec ton display none si je comprend bien c'est ça ?

Ensuite on ne peux (enfin on ne doit pas) pas utiliser plusieurs fois le même id dans une même page html. Un id doit etre unique. Et par conséquent le getElementById ne retourne qu'un seul élément.

Il faut soit que tu ais 3 id différents (ex : navsac-error, navsac-valid, navsac-missing) ou que tu mette une classe sur ces élément et que du coup tu passe par getElementsByClassName.
Généralement je fait un mix des deux pour arriver a styler tout d'un coup mais garder la main sur chaque élément.

Quoi qu'il en soit il faut des id uniques.

Bonne journée !
Bonjour Laurent,

Pouvez vous m'expliquer comment utiliser getElementsByClassName ?

Je l'ai (getElementsByClassName) appliquée ça n'a pas marcher...
Si je comprends bien, ça sera comme ça ?

<html>
<head>

<script>
function navsac()
{
	var x = document.getElementsByClassName('navsac');
var i;
for (i = 0; i < x.length; i++) {
    x[i].style.display = 'none';
}
</script>
</head>
<body>
<!------------- Erreur d'envoi ------------->
<div class=navsac>
<div class="dialog" id="navmsg-nasa" role="dialog">
						<div class="nav_content">
							<header>Erreur d'envoi</header>
							<div class="navmsg">Une erreur s'est produite lors de l'envoi de l'e-mail. Merci de réessayer.</div>
							<footer class="nav_footer">
								<button type="button" class="nav_close button" data-dismiss="alert"	onclick="navsac()">Fermer</button>
							</footer>
						</div>
					</div>
					</div>

<!----------- Envoi Réussi ----------->					
<div class=navsac>
<div class="dialog" id="navmsg-nasa" role="dialog">
						<div class="nav_content">
							<header>Envoi réussi</header>
							<div class="navmsg">Merci de votre message. Vous recevrez une réponse dès que possible !</div>
							<footer class="nav_footer">
								<button type="button" class="nav_close button" data-dismiss="alert"	onclick="navsac()">Fermer</button>
							</footer>
						</div>
					</div>
					</div>	
					
<!------------- Champ manquant ------------->
<div class=navsac>
<div class="dialog" id="navmsg-nasa" role="dialog">
						<div class="nav_content">
							<header>Champ(s) manquant(s)</header>
							<div class="navmsg">Un ou plusieurs ne sont pas remplis, merci de les remplir.</div>
							<footer class="nav_footer">
								<button type="button" class="nav_close button" data-dismiss="alert"	onclick="navsac()">Fermer</button>
							</footer>
						</div>
					</div>
					</div>
</body>
</html>
Erreur, fermer la function:

<script>
function navsac()
{
	var x = document.getElementsByClassName('navsac');
var i;
for (i = 0; i < x.length; i++) {
    x[i].style.display = 'none';
}
}
Sujet clos
Aller à