Et notat om, hvordan du udløser én funktion ved et klik, og en anden funktion ved næste klik.
Notatet er en opdatering af en tidligere artikel med
samme overskrift.
Dén artikel beskrev dels en lidt gammeldags måde at gøre dette på, og dels
er den behæftet med en fejl, som jeg først for nylig er blevet opmærksom på.
Funktionen er her:
Klik en gang på triggeren og elementet vises. Klik igen, og elementet forsvinder.
Det er ofte en meget nyttig funktion at have i baghånden. Jeg laver dette notat for at blive fri for hver gang at tænke igennem, hvordan det nu lige er, man gør det.
I den tidligere version så funktionskaldet således ud:
<a href="javascript:visElement('blok1')"> Vis/skjul element</a>
Det sådan set fint nok, da vi lavede websider i henhold til HTML-standarden. Men skal websiden kodes i henhold til XHTML-standarden, går det ikke at bruge javascript:-protokollen.
I stedet bør vi bruge onclick event handleren, således at funktionskaldet nu bør udformes således:
<a href="#" onclick="visElement('blok1')"> Vis/skjul element</a>
Det kan gøres endnu mere elegant, men det er en anden historie, som de siger.
Funktionen er grundlæggende den samme som i den tidligere artikel, men jeg har lært lidt siden jeg skrev den første gang i foregående århundrede. Her er mit bud på en mere moderne udformning:
function visElement(objekt) { if (document.getElementById(objekt).style. --> visibility=="visible") { document.getElementById(objekt).style. --> visibility="hidden"; } else { document.getElementById(objekt).style. --> visibility="visible"; } }
OBS! hvis du kopierer JavaScript-koden her fra siden er
det bydende nødvendigt at du fjerner -->
-tegnene.
I den tidligere version styrede vi betingelsen (if/else
) ved hjælp af en
variabel, der var true eller false (0 eller 1) alt efter om elementet var
i den ene eller den anden tilstand (visible
eller hidden
).
Men jeg synes nu det er mere elegant simpelthen at undersøge elementets aktuelle tilstand.
“Naturtilstanden” for den blå kasse i artiklens indledning er,
at værdien af visibility
-egenskaben er hidden
.
Derfor undersøger jeg i funktionens første linie, om visibility
-tilstanden
er visible
.
Er denne betingelse ikke opfyldt, falder funktionen igennem
til else
, den tredie linie i funktionen, der sætter
visibility
-tilstanden til visible
.
Er betingelsen i første linie derimod opfyldt, er elementet synligt, og derfor skjules det i den anden linie.
Hvis udgangs-tilstanden – der sættes i websidens stylesheet, er, at elementet er synligt, og derfor skal skjules ved det første klik og vises igen ved det andet klik – jf. boksen herunder – kan vi bruge næsten den samme funktion.
Funktionen får nu følgende udseende:
function skjulElement(objekt) { if (document.getElementById(objekt).style. --> visibility=="hidden") { document.getElementById(objekt).style. --> visibility="visible"; } else { document.getElementById(objekt).style. --> visibility="hidden"; } }
Den opmærksom læser har sikkert noteret sig, at de to CSS-kasser fylder det de fylder her på siden, uanset om de er synlige eller skjulte.
Ønsker vi at fjerne et element fuldstændigt fra websiden,
er det nødvendig at bruge display
-egenskaben i stedet
for visibility
-egenskaben.
De ganske tilsvarende funktioner for denne egenskab er:
function visElement(objekt) { if (document.getElementById(objekt).style. --> display=="block") { document.getElementById(objekt).style. --> display="none"; } else { document.getElementById(objekt).style. --> display="block"; } } function skjulElement(objekt) { if (document.getElementById(objekt).style. --> display=="none") { document.getElementById(objekt).style. --> display="block"; } else { document.getElementById(objekt).style. --> display="none"; } }
Er du lidt ferm til programmering i forvejen kender du måske til betingelsesoperatoren, der kan korte en if then else erklæring ned til
if (betingelse) ? instruks1 : instruks2;
Hvis betingelse er sand, udfør da instruks1, hvis betingelse ikke er sand, udfør da instruks2.
Bruger vi denne operator kan vore to funktioner skrives ganske kort:
function visElement(objekt) { var blok = document.getElementById(objekt).style; (blok.visibility == "visible") ? blok.visibility="hidden" : blok.visibility="visible"; } function skjulElement(objekt) { var blok = document.getElementById(objekt).style; (blok.visibility == "hidden") ? blok.visibility="visible" : blok.visibility="hidden"; }
Denne side er senest opdateret: December 17, 2007