[débutant]display de div en appuyant sur un bouton

Version imprimable

bonjour,

j'ai fais une petite fonction qui me permet de rentre une div visible ou invisible grâce au clic sur un bouton.

Alors si j'enlève la boucle de mon code, j'ai bien une div qui apparaît mais le problème c'est que si il y a plus d'un enregistrement cela ne va plus. Si je mets la boucle pour prendre en compte tous mes enregistrements cela ne fonctionne plus.

code html de ma div
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <td colspan=5 class=BG5><input type=button value='reporting' onclick = "report('reporting')"></td> </tr> <tr> <td colspan=4> <div style=display:none id=reporting$tache_id> <textarea name=wrk_rem$i style='height:80px;width:100%'></textarea> Date : <input name=wrk_date$i id=wrk_date$i style='text-align:center;width:70px' value=$date>     Temps : <input name=wrk_temps$i id=wrk_temps$i style='text-align:center;width:50px'><br> <input type="hidden" value="$r4[tache_id]"> <input type=submit value='Valider'> </div>
et voilà le code de ma fonction javascript :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 function report(reporting) { var i; var tabInput = document.getElementsByTagName("div"); var n = tabInput.length; for (i=0; i<n; i++) { maDiv = document.getElementById(reporting + $tache_id); if (maDiv.style.display=="none") { maDiv.style.display = "block"; } else { maDiv.style.display = "none"; } } }
si vous voyez le problème. Merci d'avance.

07/05/2008, 14h33
Barsy

tu t'es trompé

dans le for de ta fonction, il faut mettre :

Code:

maDiv = document.getElementById(reporting + i);
07/05/2008, 14h37
younid

Citation:

Envoyé par kifouillou

...mais le problème c'est que si il y a plus d'un enregistrement cela ne va plus. Si je mets la boucle pour prendre en compte tous mes enregistrements cela ne fonctionne plus.

Bonjour,

Qu'est ce que tu entend par ça ne marche plus ?
As-tu un quelconque message d'erreur dans la console javascript ?

Sinon, j'aimerais bien que tu nous explique à quoi correspondent les variables avec le $ dans ton code et en particulier $tache_id. Je suppose que c'est du code PHP.

Enfin, tu nous dis pas non plus quel doit être le résultat de ta fonction exactement. Est-ce que tu veux que tous tes bloc DIV concernant 'reporting' apparaissent et disparaissent en même temps (c'est ce que tu semble avoir fais) ou bien que chacun d'entre eux réagissent à son propre bouton auquel cas il te faut envoyer en paramètre à ta fonction le id de ce DIV et ne pas faire une boucle sur tout les autre DIV.

Bon je crois que je t'es posé trop de questions alors je vais attendre que tu nous éclaire un peu plus sur ton code.
07/05/2008, 14h46
kifouillou

edit
Bonjour,

effectivement je n'ai pas beaucoup expliqué ce que je veux faire.

En fait le résultat de ma page c'est l'affichage d'un projet et des différentes taches liés au projet. Ce qui m'intéresse c'est les taches. Pour chaque tache j'ai un bouton reporting qui me fait apparaitre un div caché correspondant à l'id de la tache. Mais que je clique sur n'importe lequel des boutons c'est toujours le dernier id qui est pris en compte, donc par exemple si je clique sur le bouton reporting de ma première tache et que j'ai trois taches d'affichées,c'est en dessous de la troisième tache que le formulaire apparaît.

Sinon lorsque je dis que cela ne marche plus, je n'ai pas d'erreur javascript mais la div n'apparaît même plus. Voilà, j'espère vous avoir un peu plus éclairé.

edit : Barsy quand je modifie ce que tu m'as dit
Code:

1 2 maDiv = document.getElementById(reporting + i);
firebug me trouve une erreur quand je clique sur mon bouton:
Code:

1 2 maDiv has no properties

Essaye avec ça :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<td colspan=5 class=BG5><input type=button value='reporting' onclick = "report('reporting$tache_id')"></td>
      </tr>
      <tr>
      <td colspan=4>
      <div style=display:none id=reporting$tache_id>
      
      <textarea name=wrk_rem$i style='height:80px;width:100%'></textarea>
      Date : <input name=wrk_date$i id=wrk_date$i style='text-align:center;width:70px' value=$date> &nbsp;&nbsp;&nbsp; Temps : <input name=wrk_temps$i id=wrk_temps$i style='text-align:center;width:50px'><br>
      <input type="hidden" value="$r4[tache_id]">
      <input type=submit value='Valider'>
      </div>

Le code de la fonction javascript :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function report(id_div)	// La fonction reçois l'identité du DIV à traiter en paramètre
{
	if(maDiv = document.getElementById(id_div)) {	// On vérifie l'existence du DIV
		if (maDiv.style.display=="none")	// Si le DIV est caché on le rend visible
		{
			maDiv.style.display = "block";
		}
		else						// Sinon on le masque
		{
			maDiv.style.display = "none";
		}
	}
}

07/05/2008, 15h44
kifouillou

Parfait. Exactement ce que je voulais.

J'aurais du le voir. Mais j'étais certains que l'erreur venait de mon js donc j'ai pas cherché ailleurs. Non mais alors desfois.

Un très grand merci à toi en tout cas.
07/05/2008, 15h58
younid

De rien :king:

C'est à moi que ça fait plaisir de savoir que je peut aider quelqu'un :yaisse2:

A+