all html : Le portail des webmaster

liste des forums liste des discussions Participer à la discussion

Message publié le vendredi 11 juillet 2008 à 13 h 33 par blidd.

Bonjour,

J'utilise sur mon site un script qui permet d'afficher ou cacher un <div> selon que l'on coche ou que l'on décoche une checkbox (il utilise deux autres petits scripts [montre() et cache()]. Or le problème est que je dois le reporter pour chaque checkbox et chaque div.

<script>
function selectionDiv1()
{ etat=document.forms["general"].elements["BoxDiv1"].checked
if(etat==true) { montre('Div1'); }
if(etat==false) { cache('Div1'); } }
</script>
<input type="checkbox" name="BoxDiv1" id="BoxDiv1" value="1" onclick="javascript:selectionDiv1();">
<div name="Div1">...</div>

<script>
function selectionDiv2()
{ etat=document.forms["general"].elements["BoxDiv2"].checked
if(etat==true) { montre('Div2'); }
if(etat==false) { cache('Div2'); } }
</script>
</script>
<input type="checkbox" name="BoxDiv2" id="BoxDiv2" value="1" onclick="javascript:selectionDiv2();">
<div name="Div2">...</div>

Comment faire pour créer un seul script qui s'adapte à une variable ex.: selection(Div1), selection(Div2). Je suis nul en javascript !

Merci d'avance.

• participer

Message publié le samedi 12 juillet 2008 à 01 h 05 par laruiss.

Plutôt que d'utiliser document.forms["general"].elements["BoxDiv2"], qui est du code des années 90 et est à proscrire, utilise directement
document.getElementById('BoxDiv2');

sinon, au lieu d'écrire
if(etat==true) { /* code si vrai */ }
if(etat==false) { /* code si faux */ }

ecris plus simplement
if (etat) { /* code si vrai */ }
else { /* code si faux */ }

Il faut éviter aussi d'utiliser les attributs on* (onclick, onmouseover, etc.), il y a d'autres moyens d'écouter les évènements, mais ce sera pour plus tard ;-)

<input type="checkbox" name="BoxDiv2" id="BoxDiv2" value="1" onclick="toggleMatchingDiv(this);">

et fonction à mettre au même niveau que montre() et cache()
function toggleMatchingDiv(inputElt) { var etat = inputElt.checked; var matchingDivId = inputElt.id.replace('Box', ''); // On enlève 'Box' de l'id de l'élément input : 'BoxDiv2' ==> 'Div2' if (etat) {montre(matchingDivId);}; else {cache(matchingDivId);}; }

voilà...

• participer

Message publié le samedi 12 juillet 2008 à 11 h 09 par Dr_von_scott.

Salut,

Une toute petite fonction pour faire ton bonheur :) :)

function show_hide(obj,bloc)
{
elt=document.getElementById(bloc);
if(elt.style.display == 'none')
{
elt.style.display='block';
}
else
{
elt.style.display='none';
}
}

Ensuite tu l'utilise comme ca :

<img src="images/plus.gif" alt="Develloper/reduire" onclick="show_hide(this,'div1');" />

ou meme comme ca

<a href="#" title="Develloper/reduire" onclick="show_hide(this,'div1');">Cliquez ici</a>

• participer

liste des forums liste des discussions Participer à la discussion

Vous devez obligatoirement vous identifier en tant que membre pour participer à cette discussion.