afficher / cacher un div

11 nov. 2009, 00:42

Bonjour à tous, je suis webnoobiste, donc vous étonnez pas si mon erreur est stupide :

Je voudrais faire une page dans laquelle des éléments puissent s'afficher et se cacher. J'ai fait une page simple, avec un menu qui comporte des liens, et chaque lien est censé afficher un texte et effacer les autres :

<html>
<head>

<script type="text/javascript">

function affiche (iddiv)
	{
	 for (var i = 1 ; i<4 ; i++)
		{
		 if ( i = iddiv)
			{
			 document.getElementById("d"+i).style.display = 'block' ;
			}
		 else
			{
			 document.getElementById("d"+i).style.display = 'none' ;
			}
		}
	}
	
</script>

<title> Test </title>

</head>

<body>
<div style="width: 600px; height: 300px; float: left">
<div style="width: 300px; height: 300px; float: left; padding: 5px">
<H1 style="text-align: center">Menu</H1><br/><br/><br/>
<ul>
<li><a href="#" onclick="affiche(1)">paragraphe 1</a></li><br/>
<li><a href="#" onclick="affiche(2)">paragraphe 2</a></li><br/>
<li><a href="#" onclick="affiche(3)">paragraphe 3</a></li><br/>
</ul>
</div>


<div style="width: 278px; height: 278px; float: left; padding: 5px;">
<div id="d1" style="padding: 5px; display: none;">
<H1 style="text-align: center">Paragraphe 1</H1><br/><br/><br/>
<p> Voici donc ce fameux paragraphe 1, qui blablablabla </p><br/><br/>
<a onclick="document.getElementById('d1').style.display='none'" href="#"> Effacer ce paragraphe </a>
</div>

<div style="width: 278px; height: 278px; float: left; padding: 5px;">
<div id="d2" style="padding: 5px; display: none;">
<H1 style="text-align: center">Paragraphe 2</H1><br/><br/><br/>
<p> Voici donc ce fameux paragraphe 2, qui blablablabla </p><br/><br/>
<a onclick="document.getElementById('d2').style.display='none'" href="#"> Effacer ce paragraphe </a>
</div>

<div style="width: 278px; height: 278px; float: left; padding: 5px;">
<div id="d3" style="padding: 5px; display: none;">
<H1 style="text-align: center">Paragraphe 3</H1><br/><br/><br/>
<p> Voici donc ce fameux paragraphe 3, qui blablablabla </p><br/><br/>
<a onclick="document.getElementById('d3').style.display='none'" href="#"> Effacer ce paragraphe </a>
</div>

</body>
</html>

Mon problème, c'est que cela ne marche pas, et le navigateur freeze au moment d'appeler la fonction. C'est ma 1ere utilisation de javascript, aussi je suis pas sur de la syntaxe, mais pourtant j'ai vérifié, et je crois que c'est bon...
Bref, si qqun pouvait m'aider, je le remercie fort :p

11 nov. 2009, 11:09

Salut ,

déjà , tu as un probléme , au niveau de ta condition if :

Code : Tout sélectionner

if ( i = iddiv)

C'est un double égal pour vérifier une égalité :

Code : Tout sélectionner

if ( i == iddiv)

Ensuite , tests en mettant le numéro du div entre guillemets , tu passeras donc une chaine et non un entier , je ne penses pas que celà change quelque chose , car la concaténation

Code : Tout sélectionner

document.getElementById("d"+i).st.....

transforme le tout en chaine .. mais bon ...

Good luck ,
Ch.

11 nov. 2009, 16:34

ah j'ai honte, mais comme je connais pas javascript, j'me disais que le problème venait d'ailleurs. Merci, problème résolu.

afficher / cacher un div

Qui est en ligne