Associer plusieurs actions à "onclick"
macunaima
-
macunaima -
macunaima -
Bonjour,
Je voudrais associer plusieurs actions à un même événement (onclick) dans un lien hypertexte. Pour clarifier, je voudrais que onclick ouvre une div, mais avant cela, qu'il referme celle qu'il a ouvert précédement, si il en a déjà ouverte une. Est-ce possible, et quelle est la syntaxe que je dois utiliser? Pour l'instant j'ai ceci:
DANS HEAD:
<script type="text/javascript">
<!--
function toggle(eltId)
{
var elt = document.getElementById(eltId);
elt.style.display = (elt.style.display == "block") ? "none" : "block";
}
// -->
</script>
<script type="text/javascript">
<!--
var bloc= 0;
// -->
</script>
DANS BODY:
<a href="javascript:void(0)" onclick="toggle (bloc); toggle('texte_n2 #COMPTEUR_BOUCLE'); bloc='texte_n2 #COMPTEUR_BOUCLE';">bla bla bla </a>
Où:
toggle(bloc) referme la div dont le nom est stoqué dans la var bloc
toggle(''texte_n2 #COMPTEUR_BOUCLE') ouvre la div correspondant au choix du visiteur
bloc='texte_n2 #COMPTEUR_BOUCLE' stoque le nom de la div dans la variable bloc pour le tour suivant.
Eh bien, ça ne marche pas. Où est l'erreur???
Je voudrais associer plusieurs actions à un même événement (onclick) dans un lien hypertexte. Pour clarifier, je voudrais que onclick ouvre une div, mais avant cela, qu'il referme celle qu'il a ouvert précédement, si il en a déjà ouverte une. Est-ce possible, et quelle est la syntaxe que je dois utiliser? Pour l'instant j'ai ceci:
DANS HEAD:
<script type="text/javascript">
<!--
function toggle(eltId)
{
var elt = document.getElementById(eltId);
elt.style.display = (elt.style.display == "block") ? "none" : "block";
}
// -->
</script>
<script type="text/javascript">
<!--
var bloc= 0;
// -->
</script>
DANS BODY:
<a href="javascript:void(0)" onclick="toggle (bloc); toggle('texte_n2 #COMPTEUR_BOUCLE'); bloc='texte_n2 #COMPTEUR_BOUCLE';">bla bla bla </a>
Où:
toggle(bloc) referme la div dont le nom est stoqué dans la var bloc
toggle(''texte_n2 #COMPTEUR_BOUCLE') ouvre la div correspondant au choix du visiteur
bloc='texte_n2 #COMPTEUR_BOUCLE' stoque le nom de la div dans la variable bloc pour le tour suivant.
Eh bien, ça ne marche pas. Où est l'erreur???
Configuration: Mac OS X Safari 419.3
1 réponse
-
Bsr
Bien qu'il soit possible de placer plusieurs fonctions les unes à la suite des autres dans le onclick , il est plus propre d'appeller une unique fonction JavaScript de de faire les différents appels depuis cette fonction. Moins il y a de code JavaScript dans le code HTML mieux c'est.
Voici ce que ça peut donner :
<html> <head> <style> .bloc { display : none; margin-left : 20px; } </style> <script type="text/javascript"> <!-- function toggle(eltId) { var elt = document.getElementById(eltId); elt.style.display = (elt.style.display == "block") ? "none" : "block"; } // Variable globale stockant l'identifiant du dernier bloc passé à la fonction toggleExclusif var lastId = null; function toggleExclusif(eltId) { if (lastId) toggle(lastId); toggle(eltId); lastId = eltId; } // --> </script> </head> <body> <p> <a href="javascript:void(0)" onclick="toggleExclusif('bloc1');">Toggle bloc 1</a> <div class="bloc" id="bloc1"> Ceci est le bloc 1 </div> </p> <p> <a href="javascript:void(0)" onclick="toggleExclusif('bloc2');">Toggle bloc 2</a> <div class="bloc" id="bloc2"> Ceci est le bloc 2 </div> </p> </body>
Voilà
