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
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]
<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>[/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
