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???
A voir également:
- Associer plusieurs actions à "onclick"
- Associer chromecast - Guide
- Film d'action en français à télécharger - Télécharger - TV & Vidéo
- Comment associer deux comptes whatsapp - Guide
- Mon téléphone fait des actions tout seul - Forum Téléphones & tablettes Android
- Mon téléphone entre et sort dans les applications tout seule - Forum Mobile
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 :
Voilà
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à
macunaima
GENIAL, ÇA MARCHE!!! ouf... C'est magique. Merci.
