[Résolu] Problème de display inline/none par Zéalys - page 1

Bonjour,

J'essaie de faire une fonction qui permette d'afficher ou non certains blocs, mais il semble qu'au-delà de deux appels du type document.getElementById('identifiant').style.display = "none/inline" on sorte spontanément de la fonction, ce qui me paraît très étrange.
Voila où apparaît le problème : Lorsque je sélectionne un élément d'une sous-liste de la liste principale, puis que je change de choix dans la liste principale, le bloc que j'ai affiché au début reste là.

Voici le javascript:

function affichage(liste) {
		
			var choix = liste.options[liste.selectedIndex].value;
			var valeur = parseInt(choix);
			
			if (valeur != 0) {
				for (var i=1;i<=liste.length;i++) {	
					if (i != valeur) {
						document.getElementById("tableau"+i).style.display = "none";
					}
					else {
						document.getElementById("tableau"+i).style.display = "inline";
					}
				}
				
				alert("Muh?");
				
				if (valeur != 3) {
					alert("Pouet");
					for (var j=0;j<=document.getElementById("utilisateur").length;j++) {
						document.getElementById("utilisateur"+j).style.display = "none";
					}
				}
				if (valeur != 4) {
					alert("Maieuh!");
					for (var k=0;k<=document.getElementById("structure").length;k++) {
						document.getElementById("structure"+k).style.display = "none";
					}
				}
			}
			else {
				for (var i=1;i<=3;i++) {	
					document.getElementById("tableau"+i).style.display = "none";
				}
			}		
			alert("Fin!");
		}
		
		function affichagePopup(liste) {
		
			var choix = liste.options[liste.selectedIndex].value;
			var valeur = parseInt(choix);
			var identifiant = liste.id;
			
			for (var i=0;i<=liste.length;i++) {				
					if (i != valeur) {
						document.getElementById(identifiant+i).style.display = "none";
					}
					else {
						document.getElementById(identifiant+i).style.display = "inline";
					}
				}
		}

Et puis le code de la page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
	<head>
		<title>Page g&eacute;n&eacute;rale</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<link rel="stylesheet" media="screen" type="text/css" title="Design_general" href="css.css" />
		<script type="text/javascript" src="pageGenerale.js"><!--//--></script>
        <?php include('fonctions_tableau_general.php') ?>
        <?php include('fonctions_tableau_structure.php') ?>
	</head>
	<body>

	<div id="logo"><h3>Page g&eacute;n&eacute;rale</h3></div>

	<div id="corps">
		<form method="post" action="traitement.html">
			<p class="centrer">
				<label for="tableau">Tableau &agrave; afficher</label><br/>
				<select name="tableau" id="tableau" tabindex="10" onchange="affichage(this)" >
					<option value="00" selected="selected">- - - - -</option>
					<option value="01">Tableau général</option>
					<option value="02">Tableau structure</option>
					<option value="03">Tableau personnel</option>
					<option value="04">Tableau de synth&egrave;se</option>
					<option value="05">Tableau de validation</option>
				</select>
			<br/>
			</p>
			
			<p class="centrer">
				<input type="submit" tabindex="20" value="Modifier mon profil"/><br/>
				<input type="submit" tabindex="30" value="D&eacute;sinscription"/>
				<input type="submit" tabindex="40" value="D&eacute;connexion"/> 
			</p>
		</form>
		
	</div>
	
	<div id="tableau_generale" >
		<div id="tableau1" style="display: none;width:auto;margin:auto;">
			  <?php
		  genererTableauGeneral();
		  ?>
			General!
		</div>
		
		<div id="tableau2" style="display: none;width:500px;margin:auto;">
			<?php
		  genererTableauStructure();
		  ?> 
		  Structure!
		</div>
		
		<div id="tableau3" style="display: none;border:thin black inset;position:absolute;left:35px;top:25px;background:lemonchiffon;" >
			<b>Choisissez le tableau que vous souhaitez afficher.</b><br/>
			<p class="centrer"><select name="utilisateur" id="utilisateur" onchange="affichagePopup(this)" size="4" >
						<option value="0" selected="selected">Personnel</option>
						<option value="1">Nom et prénom (utilisateur 1)</option>
						<option value="2">Utilisateur 2</option>
						<option value="3">Utilisateur 3</option>
					</select>
			</p>
		</div>
		
		<div id="tableau4" style="display: none;border:thin black inset;position:absolute;left:35px;top:25px;background:lemonchiffon;">
			<b>Choisissez le tableau que vous souhaitez afficher.</b><br/>
			<p class="centrer"><select name="structure" id="structure" onchange="affichagePopup(this)" size="4" >
						<option value="0" selected="selected">General</option>
						<option value="1">Structure 1</option>
						<option value="2">Structure 2</option>
						<option value="3">Structure 3</option>
					</select>
			</p>
		</div>
		
		<div id="tableau5" style="display: none;width:500px;margin:auto;">
			<?php
		  genererTableauValidation();
		  ?>
		  Validation ! 
		</div>
		
		<!-- Tableaux des utilisateurs -->
		
		<div id="utilisateur0" class="bloc_tableau" style="display: none;width:auto;margin:auto;" >
			Le tableau personnel!
		</div>
		
		<div id="utilisateur1" class="bloc_tableau" style="display: none;width:auto;margin:auto;" >
			Le tableau de l'utilisateur 1!
		</div>
		
		<div id="utilisateur2" class="bloc_tableau" style="display: none;width:auto;margin:auto;" >
			Le tableau de l'utilisateur 2!
		</div>
		
		<div id="utilisateur3" class="bloc_tableau" style="display: none;width:auto;margin:auto;" >
			Le tableau de l'utilisateur 3!
		</div>
		
		<!-- Tableaux des structures -->
		
		<div id="structure0" class="bloc_tableau" style="display: none;width:auto;margin:auto;" >
			Le tableau g&eacute;n&eacute;ral!
		</div>
		
		<div id="structure1" class="bloc_tableau" style="display: none;width:auto;margin:auto;" >
			Le tableau de la structure 1!
		</div>
		
		<div id="structure2" class="bloc_tableau" style="display: none;width:auto;margin:auto;" >
			Le tableau de la structure 2!
		</div>
		
		<div id="structure3" class="bloc_tableau" style="display: none;width:auto;margin:auto;" >
			Le tableau de la structure 3!
		</div>
	
	</div>
	
	<div id="pied">powered by </div>


	</body>
</html>

Merci d'avance pour votre aide !

Zéalys

5 juin 2009 à 14:20:38

k1rby

5 juin 2009 à 14:32:20

A plusieurs moments tu fais :

for (var j=0;j<=document.getElementById("utilisateur").length;j++)

Le problème est ici. document.getElementById("utilisateur") retourne un objet HTML, pas une liste document.getElementById("utilisateur").length ne veut donc rien dire et "vaut" donc undefined.

5 juin 2009 à 14:36:52

Effectivement, cela fonctionne mieux en mettant des vrais chiffres. Existe-t-il un moyen de connaître la longueur d'une liste déroulante en javascript, ou vaut-il mieux faire ça en php?

5 juin 2009 à 14:44:22

document.getElementById('liste').options.length

5 juin 2009 à 14:50:34

Merci beaucoup !

Problème de display inline/none

Problème de display inline/none

Supprimer

Modérer

Signaler le message aux modérateurs