Affichage dynamique d'un div

**pagoda** · 20/01/2013, 11h24

Bonjour,

J'ai un souci avec une fonction js. Je suis un gros débutant dans cette techno et le code que je souhaite faire fonctionner est vraiment basique.

Dans ma page html un lien doit permettre de masquer ou afficher le contenu d'un div (en l'occurence un tableau contenant des images).

Mon code html est le suivant :

Code html :

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
<!DOCTYPE html>
<html>
 
<head>
<meta charset="utf-8" />
<title>Page d'accueil</title>
<link rel="stylesheet" href="styles.css" />
<script src="js/scripts.js"></script>
</head>
 
<body>
 
<a href="#" onClick="javascript:afficherMiniature();" id="lienAfficheMini">Afficher les miniatures</a>
 
<div id="tableFonds">
 
<table>
 
<tr>
<td><img src="img/fondminiature/tn_fond1.jpg" alt="fond1" /></td>
<td><img src="img/fondminiature/tn_fond2.jpg" alt="fond2" /></td>
<td><img src="img/fondminiature/tn_fond3.jpg" alt="fond3" /></td>
</tr>
 
<tr>
<td><img src="img/fondminiature/tn_fond4.jpg" alt="fond4" /></td>
<td><img src="img/fondminiature/tn_fond5.jpg" alt="fond5" /></td>
<td><img src="img/fondminiature/tn_fond6.jpg" alt="fond6" /></td>
</tr>
 
</table>
 
</div>
 
 
</body>
 
</html>

et la fonction js :

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
 
 
function afficherMiniature()
{
	alert("TEST 1");
	//Si la table est masquée alors on l'affiche et on met à jour le texte du lien
	if(document.getElementById('tableFonds').style.dislay == "none")
	{
	alert("TEST 2");
		document.getElementById('tableFonds').style.dislay = "block";
		alert("TEST 3");
 
	}
	else  //Sinon on masque la table et on met à jour le texte du lien
	{
	alert("TEST 5");
		document.getElementById('tableFonds').style.dislay = "none";	
		alert("TEST 6");
	}
}

Il est à noter que l'affichage des alert() fonctionne correctement. Par conséquent la fonction est bien éxécutée et les if fonctionne comme il faut. Je ne comprend donct pas pourquoi les lignes permettant le changement de l'affichage ne fonctionne pas.

ps : je fait met test sous Firefox.

Merci d'avance pour votre aide !!!

**SpaceFrog** · 20/01/2013, 11h37

Code :

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

<a href="#" onclick="afficherMiniature();return false;" id="lienAfficheMini">Afficher les miniatures</a>

il faut inhiber le href de la balise a ...
sinon ta page se recharge

**sekaijin** · 20/01/2013, 16h21

où plus simplement

Code html :

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

1
2
<!-- pas de onClick="javascript:afficherMiniature();"  sur le a href -->
<a href="#" id="lienAfficheMini">Afficher les miniatures</a>

et la fonction js :

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
//pas de fonction qui traine
document.getelementById('lienAfficheMini').onclick = 
function()
{
  alert("TEST 1");
  //Si la table est masquée alors on l'affiche et on met à jour le texte du lien
  if(document.getElementById('tableFonds').style.dislay == "none")
  {
    alert("TEST 2");
    document.getElementById('tableFonds').style.dislay = "block";
    alert("TEST 3");
  }
  else  //Sinon on masque la table et on met à jour le texte du lien
  {
    alert("TEST 5");
    document.getElementById('tableFonds').style.dislay = "none";	
    alert("TEST 6");
  }
  return false; //Un simple return false ici désacative la suite de l'événement : le href
}

A+JYT

**pagoda** · 20/01/2013, 16h27

Merci pour vos réponses.
Malheureusement aucune de vos suggestions ne fonctionnent

.

**pagoda** · 20/01/2013, 16h40

Par ailleurs la solution de sekaijin me parait bonne mais lorsque je l'utilise plus aucun alert() ne s'affiche.

**Auteur** · 20/01/2013, 18h10

Il y a une faute de frappe sur la première ligne de code proposé par Sekaijin:

Code x :

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

document.getelementById('lienAfficheMini').onclick =

il faut lire

Code :

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

document.getElementById('lienAfficheMini').onclick =

**SylvainPV** · 20/01/2013, 18h24

Et une autre faute de frappe pour display et non dislay

**NoSmoking** · 20/01/2013, 19h57

Bonjour,
il faut bien évidement que le script soit appelé après que l'élément lienAfficheMini ait été ajouté au DOM.

**pagoda** · 20/01/2013, 21h21

Après correction de la syntaxe ça marche nikel.

Merci à tous !!!

Affichage dynamique d'un div

JavaScript

Discussions similaires

Partager

Partager