Rendre visible/invisible une balise

**Tenebrous** · 31/10/2010, 14h25

Bonjour.

J'ai un petit problème, je dois parvenir à rendre visible/invisible certains paragraphes de ma page grâce à du JavaScript.
Ma page contient des devinettes et un unique bouton qui permet d'afficher ou de cacher les réponses (le bouton change de valeur lorsqu'on clique dessus). Le problème est que je n'arrive justement pas à cacher/afficher les réponses ^^
Voici mon code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!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="en" lang="en">
	<head>
		<script type="application/javascript" src="ex2js"> </script>
		<title>Révisions - ex 2</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<meta http-equiv="Content-Style-Type" content="text/css"/>
		<link rel="stylesheet" media="screen" type="text/css" title="ex2css" href="ex2css.css" />
	</head>
	<body>
		<h1 style="text-align:center">Exercice 2</h1>
 
		<p> Comment appelle-t-on un homme qui a les deux yeux dans le même trou ? </p>
		<p class="solution"> Un gynécologue. </p>
		<p> Qu'est ce qui est bleu et qui fait "poutpout" ? </p>
		<p class="solution"> Un poutpout bleu. </p>
		<p> Quelle est la différence entre une cacahuète et un clitoris ? </p>
		<p class="solution"> Aucune. Ce sont tous les deux des amuse-gueules. </p> <br /> <br />
		<input type="button" value="Afficher" id="bouton" onclick="solutions()"/>
	</body>
</html>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
 
function init()
{
 
}
 
window.onload = init;
 
var elts = document.getElementsByClass("solution");
var visible = false;
 
function solutions()
{	
	if(visible)
	{
		visible = false;
		document.getElementById("bouton").value = "Afficher";
		for(var i = 0; i < elts.length; i++)
			elts[i].style.display = "none";
	}
	else
	{
		visible = true;
		document.getElementById("bouton").value = "Cacher";
		for(var i = 0; i < elts.length; i++)
			elts[i].style.display = "block";
	}
}
 
function getElementsByClass(maClass)
{
	var tabRetour = new Array();
	var tabTmp = new Array();
 
	tabTmp = document.getElementsByTagName("*");
	j=0;
	for (i=0; i<tabTmp.length; i++) 
	{
		if (tabTmp[i].className==maClass)
	 	{
			tabRetour[j]=tabTmp[i];
			j++;
		}
 	}
 	return tabRetour;
}

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
.solution
{
	display : none;
}

Merci d'avance.

**Bovino** · 31/10/2010, 16h54

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var elts = document.getElementsByClass("solution");

Au moment où tu exécutes cette ligne, la page n'est à priori pas encore chargée et ne doit donc trouver aucun élément !
Il faut mettre la ligne dabs ta fonction init...

D'autre part, quasiment toutes les versions récentes des navigateurs implémentent getElementsByClassName (je te laisse deviner lequel fait exception

), tu devrais en tenir compte dans ta fonction getElementsByClass

**Tenebrous** · 31/10/2010, 17h42

Problème résolu, merci à toi.

Rendre visible/invisible une balise

JavaScript

Vue hybride

Discussions similaires

Partager

Partager