Javascript et affichage des div

Résolu
swoog42 Messages postés 1060 Date d'inscription   Statut Membre Dernière intervention   -  
swoog42 Messages postés 1060 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour la communauté,
j'ai un petit soucis : je veux afficher une DIV selon le choix fait dans un SELECT. Mon problème est que seule la DIV 1 (de label "divid1") s'affiche, les autres ne s'affichant pas.
Précision : quand je choisi une DIV, les autres doivent s'effacer (ce qui fonctionne).

Voici un bout de code :

<form>
<select name="liste" style="width: 500px" onChange="visibilite(this);">
<option label="1">Article 1</option>
<option label="2">Article 2</option>
<option label="3">Article 3</option>
</select>
</form>


<div style="text-align: justify; display: none;" id="divid1" class="partie">
bla bla...
</div>
<br>
<div style="text-align: justify; display: none;" id="divid2" class="partie">
bla bla...
</div>
<br>
<div style="text-align: justify; display: none;" id="divid3" class="partie">
bla bla...
</div>
<br>

<script>
//*********************************************************
//Script qui compte le nombre de DIV de la CLASSE "partie"
//Nombre stocké dans nbDiv
//*********************************************************
var mesDiv = document.getElementsByTagName('div');
var nbDiv = 0;

for(var i=0; i < mesDiv.length; i++)
{
if(mesDiv[i].className == "partie")
{
nbDiv++;
}
}

//***********************************************
//Fonction qui affiche la DIV sélectionnée
//param : option ==> option choisie de le SELECT
//***********************************************
function visibilite(option)
{
var i;
var targetElement;
var ID;
ID = option.selectedIndex + 1;
//alert(nbDiv);
targetElement = document.getElementById("divid" + ID) ;

for( i = 1 ; i <= nbDiv ; i++)
{
document.getElementById("divid" + i).style.display = "none";
alert(i);
}

targetElement.style.display = "block" ;
alert('end');

}
</script>

Merci d'avance ;)
A voir également:

14 réponses

Réponse 1 / 14
swoog42 Messages postés 1060 Date d'inscription   Statut Membre Dernière intervention   244
 
UP
0
Réponse 2 / 14
Alain_42 Messages postés 5361 Date d'inscription   Statut Membre Dernière intervention   894
 
essayes comme ça: 

<form>
<select name="liste" id="liste" style="width: 500px" onChange="visibilite(this);">
<option value=-1>--choisissez --</option>
<option value="1">Article 1</option>
<option value="2">Article 2</option>
<option value="3">Article 3</option>
</select>
</form>

dans option c'est value qu'il faut et pas label
ensuite, il faut une ligne d'option en plus sinon le onChnage ne marchera pas pour article 1 en premier choix

<div style="text-align: justify; display: none;" id="divid1" class="partie">
bla bla... 1
</div>
<br>
<div style="text-align: justify; display: none;" id="divid2" class="partie">
bla bla... 2
</div>
<br>
<div style="text-align: justify; display: none;" id="divid3" class="partie">
bla bla... 3
</div>
<br>

<script type="text/javascript">  //il faut préciser le type de script

//*********************************************************
//Script qui compte le nombre de DIV de la CLASSE "partie"
//Nombre stocké dans nbDiv
//*********************************************************
var mesDiv = document.getElementsByTagName('div');
var nbDiv = 0;

for(var i=0; i < mesDiv.length; i++)
{
if(mesDiv[i].className == "partie")
{
nbDiv++;
}
}

//***********************************************
//Fonction qui affiche la DIV sélectionnée
//param : option ==> option choisie de le SELECT
//***********************************************
function visibilite(option)
{
var i;
var targetElement;
var ID=document.getElementById('liste').value;
//ID = option.selectedIndex ; 
//alert(nbDiv);
targetElement = document.getElementById("divid" + ID) ;

// si ID=-1 on ne fait rien (premiere ligne -- choisissez --)
if(ID !=-1){
	for( i = 1 ; i <= nbDiv ; i++)
	{
		document.getElementById("divid" + i).style.display = "none";
		alert(i);
	}

	targetElement.style.display = "block" ;
	alert('end');

}
}
</script>
0
Réponse 3 / 14
swoog42 Messages postés 1060 Date d'inscription   Statut Membre Dernière intervention   244
 
J'ai fait une série de alert() et apparemment, il n'aime pas cette ligne
var ID=document.getElementById('liste').value;

Rien ne se passe après :s
0
Réponse 4 / 14
Alain_42 Messages postés 5361 Date d'inscription   Statut Membre Dernière intervention   894
 
chez moi ça marche mais tu n'as certainement pas mis le id="liste" dans la balise <select
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 14
swoog42 Messages postés 1060 Date d'inscription   Statut Membre Dernière intervention   244
 
je l'avais oublié, en effet... mais ca ne marche pas mieux... il passe cette ligne maintenant, mais le problème est le même

quand je choisi l'article 1, il me l'affiche... Quand je choisi n'importe quel autre, il efface le 1 (normal) mais n'affiche rien à la place :s
0
Réponse 6 / 14
Alain_42 Messages postés 5361 Date d'inscription   Statut Membre Dernière intervention   894
 
as tu aussi modifie label par value dans les <option
0
Réponse 7 / 14
swoog42 Messages postés 1060 Date d'inscription   Statut Membre Dernière intervention   244
 
oui c'est fait....
je trouve ca incompréhensible que ca marche pour la div1 et pas pour les autres...
Après une série d'alert, je me rends compte que le targetElement a bien le bon ID
0
Réponse 8 / 14
Alain_42 Messages postés 5361 Date d'inscription   Statut Membre Dernière intervention   894
 
Ecoute chez moi ça marche avec le code que je t'ai donné
0
Réponse 9 / 14
swoog42 Messages postés 1060 Date d'inscription   Statut Membre Dernière intervention   244
 
Voici le code complet de ma page, peut etre une coquille, mais je ne vois pas ou :s 



<h1>Articles</h1><br>


<center><form><select name="liste" id="liste"  style="width: 500px" onChange="visibilite(this);">
<option value=-1>-- Choisissez un article --</option>

<?php
include "connect.php";
$retour = mysql_query("SELECT * FROM article");


while ($donnees = mysql_fetch_array($retour)) // On fait une boucle pour lister les news
{
?>
<option value="<?php echo $donnees['id']; ?>">Article <?php echo $donnees['id']; ?> : <?php echo $donnees['titre']; ?></option>
<?php
} // Fin de la boucle qui liste les news
?>
</select></form></center>

<?php
include "connect.php";
$retour = mysql_query("SELECT * FROM article");


while ($donnees = mysql_fetch_array($retour)) // On fait une boucle pour lister les news
{
?>
<div style="text-align: justify; display: none;" id="divid<?php echo $donnees['id']; ?>" class="partie">
<h2><center>ARTICLE <?php echo $donnees['id']; ?> : <?php echo $donnees['titre']; ?></center></h2>
<?php echo $donnees['texte']; ?>
<!-- <hr width="100%" align="center" size="5" color="#D400B6"> -->

<?php
} // Fin de la boucle qui liste les news
?>
</div>
<br>

<script type="text/javascript">
//*********************************************************
//Script qui compte le nombre de DIV de la CLASSE "partie"
//Nombre stocké dans nbDiv
//*********************************************************
var mesDiv = document.getElementsByTagName('div');
var nbDiv = 0;

for(var i=0; i < mesDiv.length; i++)
{
	if(mesDiv[i].className == "partie")
	{
		nbDiv++;
	}
}

//***********************************************
//Fonction qui affiche la DIV sélectionnée
//param : option ==> option choisie de le SELECT
//***********************************************
function visibilite(option)
{
	var i;
	var targetElement;
	var ID=document.getElementById('liste').value;
	//ID = option.selectedIndex ; 
	//alert('ID = ' + ID);
	targetElement = document.getElementById("divid" + ID) ;

	// si ID=-1 on ne fait rien (premiere ligne -- choisissez --)
	if(ID !=-1)
	{
		for( i = 1 ; i <= nbDiv ; i++)
		{
			document.getElementById("divid" + i).style.display = "none";
		}

		targetElement.style.display = "block" ;
		targetElement.style.visibility = "visible" ;
		alert(targetElement.id);

	}
}

</script>
0
Réponse 10 / 14
Alain_42 Messages postés 5361 Date d'inscription   Statut Membre Dernière intervention   894
  
<h1>Articles</h1><br>


<center><form><select name="liste" id="liste"  style="width: 500px" onChange="visibilite(this);">
<option value=-1>-- Choisissez un article --</option>

<?php
include "connect.php";
$retour = mysql_query("SELECT * FROM article");


while ($donnees = mysql_fetch_array($retour)) // On fait une boucle pour lister les news
{
?>
<option value="<?php echo $donnees['id']; ?>">Article <?php echo $donnees['id']; ?> : <?php echo $donnees['titre']; ?></option>
<?php
} // Fin de la boucle qui liste les news
?>
</select></form></center>

<?php
//include "connect.php";  //ERREUR tu ne peux pas mettre deux fois le même include de fichier, donc ça devait arreter le script php et en fait tu n'affichait que ce qui restait dans la precedente requette

$retour = mysql_query("SELECT * FROM article");
0
swoog42 Messages postés 1060 Date d'inscription   Statut Membre Dernière intervention   244
 
désolé, je n'avais pas vu ton message...
mais mon problème est toujours la... seul la divid1 s'affiche...

Quand je regarde le code source de ma page, toutes les DIV apparaissent bien, correctement disposées et par d'erreur de syntaxe (en tout cas, je n'en vois pas)... je désespère :'(
0
Réponse 11 / 14
swoog42 Messages postés 1060 Date d'inscription   Statut Membre Dernière intervention   244
 
Une idée ?
0
Réponse 12 / 14
swoog42 Messages postés 1060 Date d'inscription   Statut Membre Dernière intervention   244
 
UP
0
Réponse 13 / 14
Alain_42 Messages postés 5361 Date d'inscription   Statut Membre Dernière intervention   894
 
je ne peux pas essayer ton script puisque je n'ai pas ta table, mais essayes comme ça: 

<h1>Articles</h1><br>


<center><form>
<select name="liste" id="liste"  style="width: 500px" onChange="visibilite(this);">
<option value=-1>-- Choisissez un article --</option>

<?php
include "connect.php";
$retour = mysql_query("SELECT * FROM article");
mysql_close();

while ($donnees = mysql_fetch_array($retour)) // On fait une boucle pour lister les news
{
?>
<option value="<?php echo $donnees['id']; ?>">Article <?php echo $donnees['id']; ?> : <?php echo $donnees['titre']; ?></option>
<?php
} // Fin de la boucle qui liste les news
?>
</select></form>
</center>

<?php
//include "connect.php";
//$retour = mysql_query("SELECT * FROM article");
mysql_data_seek($retour);

while ($donnees = mysql_fetch_array($retour)) // On fait une boucle pour lister les news
{
?>
<div style="text-align: justify; display: none;" id="divid<?php echo $donnees['id']; ?>" class="partie">
<h2><center>ARTICLE <?php echo $donnees['id']; ?> : <?php echo $donnees['titre']; ?></center></h2>
<?php echo $donnees['texte']; ?>
<!-- <hr width="100%" align="center" size="5" color="#D400B6"> -->

<?php
} // Fin de la boucle qui liste les news
?>
</div>
<br>

<script type="text/javascript">
//*********************************************************
//Script qui compte le nombre de DIV de la CLASSE "partie"
//Nombre stocké dans nbDiv
//*********************************************************
var mesDiv = document.getElementsByTagName('div');
var nbDiv = 0;

for(var i=0; i < mesDiv.length; i++)
{
	if(mesDiv[i].className == "partie")
	{
		nbDiv++;
	}
}

//***********************************************
//Fonction qui affiche la DIV sélectionnée
//param : option ==> option choisie de le SELECT
//***********************************************
function visibilite(option)
{
	var i;
	var targetElement;
	var ID_select=document.getElementById('liste').value;
	//ID = option.selectedIndex ; 
	//alert('ID = ' + ID);
	targetElement = document.getElementById("divid"+ID_select) ;

	// si ID_select=-1 on ne fait rien (premiere ligne -- choisissez --)
	if(ID_select !=-1)
	{
		for( i = 1 ; i <= nbDiv ; i++)
		{
			document.getElementById("divid" + i).style.display = "none";
		}

		targetElement.style.display = "block" ;
		targetElement.style.visibility = "visible" ;
		alert(targetElement.id);

	}
}

</script>
0
Réponse 14 / 14
swoog42 Messages postés 1060 Date d'inscription   Statut Membre Dernière intervention   244
 
D'abord, merci pour votre aide.

J'ai trouvé le problème : mes DIV n'étaient pas clôturées dans mon code original.
Tout marche à la perfection.

Désolé de vous avoir fait perdre votre temps !
0

Discussions similaires

java script error in the main process
ceciel2307 -
Thibaut -

3 réponses
Les images ne s'affichent plus
papyrus95 -
melle -

15 réponses
impossible de voir les photos et videos sur une conversation messenger
cortomaltese83 -
Oceii -

4 réponses
Probleme d'affichage google chrome
flyingvvv -
helo -

5 réponses
Problème d'affichage d'une page web.
mk51 -
mk51 -

33 réponses