[JAVASCRIPT] Afficher/Cacher du texte

Logiciel & apps Programmation
1

Salut :slight_smile:

J’ai besoin d’aide pour un script afin de cacher/afficher du texte. Voici le script que j’ai:

<script LANGUAGE="JavaScript">
function display(calque)
{
document.getElementById(calque).style.display=document.getElementById(calque).style.display=="none"?"block":"none";
}
</SCRIPT>

Ensuite le bouton pour afficher/cacher:

<div align=center><input type="button" onclick="display('calque');" value="Afficher les résultats"/><br></div>

Le texte à afficher/cacher:


<div id=calque>aaaaaa</div>
<div id=calque>bbbbb</div>
<div id=calque>ccccc</div>
.....

Le problème est que, quand j’appuie sur le bouton pour afficher/cacher, il ne fonctionne que sur le premier, c’est à dire “aaaaaa”…

Comment faire pour qu’il puisse fonctionner sur tous?

Merci

EDIT: oups désolé pour l’erreur de titre

2

Ce n’est pas du java, mais du javascript :wink:

Peux-tu modifier ton titre en consequence ?
Merci :jap:

3

Bonjour,
je pense qu’il faut que tu nomme différemment tout tes éléments et que tu boucle sur tout les noms. (appelle les calque0, calque1, calque2 et fait une boucle while i++ en t’arrêtant dès que getElementById est null).

edit, ne le prend pas mal, mais j’ai une petite remarque sur la forme: les variables ça existe :smiley:


var staielleu =document.getElementById(calque).style;
staielleu.display=(staielleu.display=="none")?"block":"none";

c’est un peu plus court et lisible :wink:
remarque 2: je nomme très mal mes variables.

4

Si j’ai bien compris, je dois changer dans

<script LANGUAGE="JavaScript">
function display(calque)
{
document.getElementById(calque).style.display=document.getElementById(calque).style.display=="none"?"block":"none";
}
</SCRIPT>

et faire une fonction while i++ entre les { } ?

Je suis un débutant en javascript et je programme en php en ce moment :confused:

5

quelqu’un peut m’aider à faire ce script? :slight_smile:

6

2 possibilities:

soit tu nomme tes calques différemment:

<html>
<head><script language="javascript">
function affiche()
{
for (i=1;i<=2;i++)
{
document.getElementById("calque"+i).style.display="none";
}
}
</script></head>

<body>
<a href="java script:affiche()">affiche</a>

<div id="calque1" style="position:absolute; left:200px; top:20px;">
aaaa
</div>
<div id="calque2" style="position:absolute; left:200px; top:200px;">
bbbb
</div>

</body>

Soit tu englobe tes div dans un div

<html>
<head>
<script language="javascript">
function affiche()
{
document.getElementById("calque").style.display="none";
}
</script>
</head>

<body>
<a href="java script:affiche()">affiche</a>
<div id="calque">
<div style="position:absolute; left:200px; top:20px;">
aaaa
</div>
<div style="position:absolute; left:200px; top:200px;">
bbbb
</div>
</div>
</body>

voala

7 

<script type="text/javascript">
function disp(calque){
	var i=0;
	for( i=0;i<3;i++){
	

	var styl =document.getElementById(calque+i).style;
	styl.display=(styl.display=="none")?"block":"none";
	}
}
</script>

</body>

<div id="d0">d0
</div>
<div id="d1">d1
</div>
<div id="d2">d2
</div>

testé et approuvé :wink:
edit: merci popolof :), un peu grillaid :smiley:

8

je vais tester ca, merci à tous :slight_smile:

Hmm pour "for( i=0;i<3;i++)", si la valeur maximum est variable, peut-ont indiquer au javascript de récupérer une valeur dans un fichier, par exemple 10 ce qui ferait quelque chose du genre:

var i=0;
var j=une valeur prise dans un fichier;

for (i=0;i<j;i++)… ??

9

Bien sûr, renseigne toi du coté des fonctions fread() ou fgets()

fread()

10

Mieux qu’un fichier paramétré, tu t’arrête dès qu’un id n’est pas trouvé:


while ( document.getElementById(calque+i) != null ){
  var styl =document.getElementById(calque+i).style;
  ...
  i++;
}
11

pas mal deltree :wink:

12

merci :wink:
:smiley:

13

je vais essayer ca deltree, merci :smiley:

14

Comment faire exactement? ^^

J’ai fais comme ceci:

<script LANGUAGE="JavaScript">
var i=1;
function disp(calque){
while ( document.getElementById(calque+i) != null ){
 var styl =document.getElementById(calque+i).style;
 styl.display=(styl.display=="none")?"block":"none";
 i++;
}
}
</SCRIPT>

Le bouton pour afficher/cacher

<input type=button onclick=display('calque'); value="Afficher/Cacher la légende">

Les textes à afficher/cacher:

<div id="d1" style="display: none;">a</div>
<div id="d2" style="display: none;">b</div>
<div id="d3" style="display: none;">c</div>
<div id="d4" style="display: none;">d</div>
<div id="d5" style="display: none;">e</div>
....

Mais cela ne fonctionne pas, je suis sur que je me suis trompé quelque part dans div=id ou dans le bouton, quelqu’un qui a une solution? :wink:

15

Je m’autocorige:

<script LANGUAGE="JavaScript">
function disp(calque){
var i=0;
while ( document.getElementById(calque+i) != null ){
 var styl =document.getElementById(calque+i).style;
 styl.display=styl.display=="none"?"block":"none";
 i++;
}
}
</SCRIPT>

<input type=button onclick=disp('calque'); value="Afficher/Cacher la légende">

<div id="calque1" style="display: none;">a</div>
....

J’ai même réussi à changer pour que le bouton affiche/cache grâce à vous :smiley:

Par contre, comment faire si c’est du genre:

<td>a</td>
....

Pour que au lieu de cacher seulement le a, cela cache aussi le <td></td> ?

16

Hmm j’ai “trouvé”, en fait je pense que cela ne fonctionne que entre lignes et pas entre colonnes:


<div...>
<tr>
<td>
a
</td>
</tr>
</div>

et pas


<tr>
<div...>
<td>
a
</td>
</div>
</tr>
17

Dans tous les cas, ta correction est fausse. tr ne peut pas contenir de div, sauf dans td, th…